1

我正在尝试创建一个带有页眉和页脚的简单 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 时，它将左侧高度设置为内容div 的高度，但是由于左侧div 的高度增加占用了额外空间，右侧div 中的内容被向下推，增加了右侧 div 的高度，并在 2 个 div 的高度之间留下了间隙。

请参阅此小提琴以获取工作示例 http://jsfiddle.net/W3P4U/

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

4

1 回答 1

3

请参阅更新的小提琴。变化：

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-19T00:22:55.053 回答