Question

我正在尝试使用页眉和页脚创建一个简单的2列布局。

我有以下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脚本

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

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

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

这不太有效，因为当执行adjustLeftHeight时，它将lefts高度设置为内容div的高度，但由于左边div的高度增加所占用的额外空间右侧div被推下来增加右侧div的高度，并在2个div的高度之间留下间隙。

看到这个小提琴，找到一个有用的例子http://jsfiddle.net/W3P4U/

有没有办法实现2列布局，其中两列的高度是最高列的高度。

Answer 1

查看更新的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());
}

如何将浮动div的高度设置为与其邻居相同的高度

1 个答案: