Как установить высоту плавающего div на одну и ту же высоту своего соседа

Я пытаюсь создать простой 2-х столбчатый макет с заголовком и нижним колонтитулом.Как установить высоту плавающего div на одну и ту же высоту своего соседа

У меня есть следующие HTML

<body> 
    <div id="header"> 
     <h1>Title Bar</h1> 
    </div> 
<div id="content"> 
    <div id="left"> 
     left 
    </div> 
    <div id="right"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum neque id eros auctor tristique. Fusce quam lorem, vestibulum ut magna et, cursus molestie libero. Suspendisse sed mauris vitae diam mattis pellentesque. Nulla neque tortor, varius quis augue vel, commodo tincidunt elit. Maecenas vel odio nec velit faucibus fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum arcu libero, auctor vitae urna eget, blandit fringilla justo. Fusce eu enim id nisi condimentum dictum sit amet non lectus. 

Aenean at nulla odio. Vestibulum eleifend massa vitae velit tempor, non auctor velit imperdiet. Nunc ac odio eu justo pretium luctus. Nulla vestibulum urna sed est fermentum aliquam. Etiam eget erat eu tortor dictum rhoncus a nec justo. Sed eu dui ut leo lobortis laoreet quis sed sem. Nulla consectetur augue tristique dignissim viverra. Proin tincidunt tincidunt libero a iaculis. Etiam leo elit, cursus at velit sed, faucibus pretium leo. Ut viverra mattis sodales. Morbi hendrerit quam eu est dignissim congue. Pellentesque quis metus commodo sapien interdum rutrum pellentesque at risus. Sed tempor, orci nec tincidunt dictum, turpis purus mattis enim, ut sodales odio arcu quis sem. Praesent vitae justo lorem. Nam ultrices enim at consectetur vehicula. Ut luctus interdum urna, rutrum luctus orci varius vel. 

    Integer pharetra nisi vitae massa condimentum, ac hendrerit magna commodo. Pellentesque sit amet neque ac mauris hendrerit scelerisque quis nec sapien. Nullam tempor odio sed tristique interdum. Donec non aliquet quam. Nunc ac adipiscing tortor. Mauris nec nisl accumsan, ullamcorper metus eu, dictum mi. Mauris id adipiscing lectus. Morbi dignissim scelerisque purus ut ullamcorper. Nu 

nc placerat ipsum tortor, quis pretium est sagittis nec. In lacus eros, volutpat eu convallis a, ullamcorper vel leo. Quisque vel orci ultricies, molestie nisi non, congue leo. Nulla orci metus, vehicula at laoreet ut, congue nec sem. Proin tempor justo ut odio vestibulum suscipit in a eros. Sed fermentum et sapien id aliquam. Donec at erat bibendum, fringilla odio sit amet, sagittis nibh. 

     Morbi accumsan ullamcorper leo vel viverra. In ac imperdiet libero, id cursus eros. Morbi sed auctor quam, ac ullamcorper metus. Morbi et vestibulum justo, et volutpat libero. Duis pretium magna sapien, at porta justo sodales ve 

    l. Sed consequat magna odio, eu mattis risus malesuada vel. Aliquam tristique accumsan fermentum. Morbi interdum nunc vitae viverra pulvinar. 

    Donec neque magna, sodales dapibus imperdiet non, suscipit eget ipsum. Etiam nec dolor ut nisi pharetra dictum non eget augue. Etiam tincidunt mi id est euismod, ut venenatis neque tempus. Praesent lacinia risus metus, at condimentum diam vestibulum et. Integer ac mi nec enim facilisis pharetra. Nunc sed nibh libero. Duis imperdiet sapien id euismod viverra. Integer aliquam metus a nulla tincidunt eleifend. Donec a porttitor tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam convallis aliquam dolor. Morbi eu velit quam. Nullam sed neque id risus aliquam lobortis. Sed vel pulvinar velit, id varius mauris. Sed justo nunc, laoreet eu velit et, pulvinar eleifend lacus. Phasellus tristique orci vitae dignissim imperdiet. 
      </div> 
     </div> 


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

</body>

и следующий CSS

body { 
    background-color: red; 
    margin: 0px; 
} 
body h1 { 
    margin: 0px; 
} 
#header { 
    background-color: blue; 
    color: white; 
    height: 80px; 
} 
#content { 
    width: 700px; 
} 
#left { 
    background-color: black; 
    color: pink; 
    float: left; 
    width: 100px; 
    height: 100%; 
} 
#right { 
    background-color: lightgreen; 
    color: brown; 
} 
#footer { 
    background-color: yellow; 
    color: blue; 
    clear: both; 
    height: 40px; 
}

Я хочу, чтобы убедиться, что высота левого Div такая же, как высота правой DIV, независимо от того, какой контент находится в правом div.

Для этого я вернулся к Java Script с этим

$(document).ready(function() { 
     adjustLeftHeight(); 
    }); 

    $(window).resize(function() { 
     adjustLeftHeight(); 
    }); 

    function adjustLeftHeight() { 
     $("#left").height($("#content").height()); 
    }

Это не совсем работа в том, что, когда adjustLeftHeight выполняется его сеты Левые высоту до высоты DIV контента, но из-за дополнительное пространство, занимаемое увеличением высоты левого div, содержимое в правом div сжимается, увеличивая высоту правого div и оставляя промежуток между высотами двух div.

увидеть эту скрипку на примере работал http://jsfiddle.net/W3P4U/

Есть ли способ, чтобы достичь макет в 2 колонки, где высота обеих колонн высота самой высокой колонки.

источник

2013-09-19 David Kethel

См. Обновленный fiddle. Изменения:

1: добавить float: right в правый div и width: 300px (ширина содержимого - ширина слева), если вы хотите, чтобы они фиксировались как ширина;

2: изменение adjustLeftHeight функции к этому:

function adjustLeftHeight() { 
    var left = $("#left"), 
     right = $("#right"); 

    if (left.height() > right.height()) 
     right.height(left.height()); 
    else 
     left.height(right.height()); 
}

источник

2013-09-19 00:22:55

Как установить высоту плавающего div на одну и ту же высоту своего соседа

ответ

Смежные вопросы