На странице с двумя столбцами, как я могу увеличить левый div до той же высоты правого div, используя CSS или Javascript?

Question

На странице с двумя столбцами, как я могу увеличить левый div до той же высоты правого div, используя CSS или Javascript?

Я пытаюсь создать страницу с двумя столбцами, используя макет на основе div (без таблиц, пожалуйста!). Проблема в том, что я не могу вырастить левое деление, чтобы соответствовать высоте правого. У моего правого div обычно много контента.

Вот парный пример моего шаблона, чтобы проиллюстрировать проблему.

<div style="float:left; width: 150px; border: 1px solid;">
  <ul>
    <li>nav1</li>
    <li>nav2</li>
    <li>nav3</li>
    <li>nav4</li>
  </ul>
</div>
<div style="float:left; width: 250px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....
</div>

http://involution.com/images/divlayout.png

16

javascript html css

Источник

user3499 30 авг '08 в 05:28

11 ответов

Решение

Ваш самый простой ответ лежит в следующей версии css (3), которую в настоящее время не поддерживает ни один браузер.

На данный момент вы вынуждены рассчитывать высоту в javascript и устанавливать их на левой стороне.

Если навигация настолько важна для позиционирования таким образом, запустите ее вдоль вершины.

Вы также можете сделать визуальный трюк, переместив границы к контейнеру и большему внутреннему элементу, и сделайте так, чтобы он казался того же размера.

это выглядит так же, но это не так.

<div style="border-left:solid 1px black;border-bottom:solid 1px black;">
  <div style="float:left; width: 150px; border-top: 1px solid;">
    <ul>
     <li>nav1</li>
     <li>nav2</li>
     <li>nav3</li>
     <li>nav4</li>
    </ul>
 </div>
 <div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  ...
 </div>
 <div style="clear:both;" ></div>
</div>

9

Источник

user1220 30 авг '08 в 05:44

Это можно сделать в CSS! Не позволяйте людям говорить вам иначе.

Самый простой, самый безболезненный способ сделать это - использовать метод Faux Columns.

Однако, если это решение не работает для вас, вы захотите ознакомиться с этой техникой. Но будьте осторожны, это своего рода CSS-хакерство, которое заставит вас проснуться в холодном поту посреди ночи.

Суть в том, что вы назначаете большое количество отступов для нижней части столбца и отрицательное поле того же размера. Затем вы помещаете свои столбцы в контейнер, который имеет overflow: hidden задавать. Более или менее значения отступа / поля позволяют блоку расширяться до тех пор, пока он не достигнет конца оболочки (что определяется столбцом с наибольшим содержанием), и любое дополнительное пространство, создаваемое заполнением, будет обрезано как переполнение. Это не имеет особого смысла, я знаю...

<div id="wrapper">
  <div id="col1">Content</div>
  <div id="col2">Longer Content</div>
</div>

#wrapper {
  overflow: hidden;
}

#col1, #col2 {
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

Обязательно прочитайте всю статью, на которую я ссылался, есть ряд предостережений и других вопросов реализации. Это не красивая техника, но она работает довольно хорошо.

8

Источник

user4636 09 сен '08 в 22:02

Вы можете сделать это в JQuery очень просто, но я не уверен, что JS следует использовать для таких вещей. Лучший способ сделать это с чистым CSS.

Взгляните на искусственные колонки или даже жидкие искусственные колонны
Также другой метод (не работает на прекрасном IE6) - позиционирование: относительно родительского контейнера. Дочерний контейнер (список навигации в вашем случае) должен быть расположен абсолютно и должен занимать все пространство с помощью top:0; внизу: 0;"

4

Источник

user3718 30 авг '08 в 11:04

Это одна из тех совершенно разумных, простых вещей, которые CSS не может сделать. Поддельные колонны, как полагает Сильвиу, - хакерский, но функциональный обходной путь. Было бы прекрасно, если бы когда-нибудь был способ сказать

div.foo {
высота: $(div.blah.height);
}

2

Источник

user4376 06 сен '08 в 12:12

Это можно сделать с помощью CSS, используя цвета фона.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #87ceeb;
    font-size: 1.2em;
}
#container {
    width:100%; /* any width including 100% will work */
    color: inherit;
    margin:0 auto; /* remove if 100% width */
    background:#FFF;
}
#header {
    width: 100%;
    height: 160px;
    background: #1e90ff;
}
#content {/* use for left sidebar, menu etc. */
    background: #99C;
    color: #000;
    float: right;/* float left for right sidebar */
    margin: 0 0 0 -200px; /* adjust margin if borders added */
    width: 100%;
 }
#content .wrapper {
    background: #FFF;
    margin: 0 0 0 200px;
    overflow: hidden;
    padding: 10px; /* optional, feel free to remove */
}
#sidebar {
    background: #99C;
    color: inherit;
    float: left;
    width: 180px;
    padding: 10px;
}
.clearer {
    height: 1px;
    font-size: -1px;
    clear: both;
}

/* content styles */
#header h1 {
    padding: 0 0 0 5px;
}
#menu p {
    font-size: 1em;
    font-weight: bold;
    padding: 5px 0 5px 5px;
}
#footer {
    clear: both;
    border-top: 1px solid #1e90ff; 
    border-bottom: 10px solid #1e90ff;
    text-align: center;
    font-size: 50%;
    font-weight: bold;
}
#footer p {
    padding: 10px 0;
} 
</style>
</head>

<body>


<div id="container">
<!--header and menu content goes here -->

<div id="header">
<h1>Header Goes Here</h1>
</div>
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc 

vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>

<div id="sidebar">
<!--sidebar content, menu goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
</div>

<div class="clearer"></div><!--clears footer from content-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html>

1

Источник

28 дек '08 в 16:03

Если подумать, я никогда не делал это с нижней границей столбца. Это, вероятно, просто переполнено и становится отрезанным. Возможно, вы захотите получить нижнюю границу из отдельного элемента, который является частью содержимого столбца.

Во всяком случае, я знаю, что это не идеальное решение волшебной пули. Возможно, вам придется просто поиграть с ним или взломать его недостатки.

0

Источник

user4636 10 сен '08 в 17:27

Я использую это для выравнивания 2 столбцов с идентификатором "центр" и "право":

var c = $("#center");
var cp = parseInt(c.css("padding-top"), 10) + parseInt(c.css("padding-bottom"), 10) + parseInt(c.css("borderTopWidth"), 10) + parseInt(c.css("borderBottomWidth"), 10);
var r = $("#right");
var rp = parseInt(r.css("padding-top"), 10) + parseInt(r.css("padding-bottom"), 10) + parseInt(r.css("borderTopWidth"), 10) + parseInt(r.css("borderBottomWidth"), 10);

if (c.outerHeight() < r.outerHeight()) {
    c.height(r.height () + rp - cp);
} else {
    r.height(c.height () + cp - rp);
}

Надеюсь, поможет.

0

Источник

user67325 27 фев '09 в 08:54

Чтобы увеличить левый div меню на ту же высоту, что и правый div содержимого.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        var height = $(document).height(); //optionally, subtract some from the height
        $("#menu").css("height", (height) + "px");
        $("#content").css("height", (height) + "px");
    });
</script>
<style type="text/css">
    <!--

    html, body {
        font-family: Arial;
        font-size: 12px;
    }


    #header {
        background-color: #F9C;
        height: 200px;
        width: 100%;
        float: left;
        position: relative;
    }

    #menu {
        background-color: #6CF;
        float: left;
        min-height: 100%;
        height: auto;
        width: 10%;
        position: relative;
    }

    #content {
        background-color: #6f6;
        float: right;
        height: auto;
        width: 90%;
        position: relative;
    }

    #footer {
        background-color: #996;
        float: left;
        height: 100px;
        width: 100%;
        position: relative;
    }
    -->
</style>
</head>


<body>
<div id="header">
    i am a header
</div>
<div id="menu">
    i am a menu
</div>
<div id="content">
    I am an example of how to do layout with css rules and divs.
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>

</div>
<div id="footer">
    footer
</div>


</body>
</html>

0

Источник

user3454979 25 мар '14 в 08:27

@hoyhoy

Если дизайнер может сделать эту работу в HTML, то он может иметь этот дизайн. Если он настоящий мастер веб-дизайна, он поймет, что это является ограничением средств массовой информации, так как видео невозможно в журнальной рекламе.

Если он хотел бы смоделировать вес, придав двум столбцам одинаковое значение, измените границы, чтобы они выглядели одинаково, и чтобы цвета границ контрастировали с цветом шрифта столбцов.

Но что касается создания физических элементов одинаковой высоты, вы можете сделать это только с помощью конструкции таблицы или установки высот в данный момент времени. Чтобы имитировать их появление одинакового размера, они не обязательно должны быть одинакового размера.

0

Источник

user1220 30 авг '08 в 05:52

Существует также решение на основе Javascript. Если у вас есть jQuery, вы можете использовать плагин ниже.

<script type="text/javascript">
// plugin
jQuery.fn.equalHeights=function() {
    var maxHeight=0;

    this.each(function(){
        if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
    });

    this.each(function(){
        $(this).height(maxHeight + "px");
        if (this.offsetHeight>maxHeight) {
            $(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
        }
    });
};

// usage
$(function() {
    $('.column1, .column2, .column3').equalHeights();
});
</script>

0

Источник

user49380 28 дек '08 в 16:17

Другие вопросы по тегам javascript html css

user224182 03 дек '09 в 19:24 2009-12-03 19:24 · Accepted Answer · 2009-12-03 19:24

Используйте jQuery для этой проблемы; просто вызовите эту функцию в своей функции готовности:

function setHeight(){
  var height = $(document).height(); //optionally, subtract some from the height
  $("#leftDiv").css("height", height + "px");
}

3

Источник

user224182 03 дек '09 в 19:24