在双列页面上，如何使用CSS或Javascript将左div增加到右div的相同高度？

I'm trying to make a two-column page using a div-based layout (no tables please!). Problem is, I can't grow the left div to match the height of the right one. My right div typically has a lot of content.

我正在尝试使用基于div的布局创建一个双列页面（请不要使用表格！）。问题是，我不能使左边的div与右边的高度相匹配。我的右边div通常有很多内容。

Here's a paired down example of my template to illustrate the problem.

这是我模板的配对示例，用于说明问题。

<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>

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

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

11 个解决方案

#1

Use jQuery for this problem; just call this function in your ready function:

使用jQuery来解决这个问题;只需在准备好的函数中调用此函数：

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

#2

Your simplest answer lies in the next version of css (3), which currently no browser supports.

您最简单的答案在于css（3）的下一个版本，目前没有浏览器支持。

For now you are relegated to calculating heights in javascript and setting them on the left side.

现在你被降级为计算javascript中的高度并将其设置在左侧。

If the navigation is so important to be positioned in such a way, run it along the top.

如果导航对于以这种方式定位非常重要，请沿顶部运行。

you could also do a visual trick by moving the borders to the container and the bigger inner, and make it appear to be the same size.

您还可以通过将边框移动到容器和更大的内部来进行视觉技巧，并使其看起来大小相同。

this makes it look the same, but it isn't.

这使它看起来一样，但事实并非如此。

<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>

#3

It can be done in CSS! Don't let people tell you otherwise.

它可以在CSS中完成！不要让别人告诉你。

The easiest, most pain-free way to do it is to use the Faux Columns method.

最简单，最无痛苦的方法是使用Faux Columns方法。

However, if that solution doesn't work for you, you'll want to read up on this technique. But be warned, this is the kind of CSS hackery that will make you wake up in a cold sweat in the middle of the night.

但是，如果该解决方案不适合您，您将需要阅读此技术。但要注意，这是一种CSS hackery，会让你在半夜醒来时醒来。

The gist of it is that you assign a large amount of padding to the bottom of the column, and a negative margin of the same size. Then you place your columns in a container that has overflow: hidden set. More or less the padding/margin values allow the box to keep expanding until it reaches the end of the wrapper (which is determined by the column with the most content), and any extra space generated by the padding is cut off as overflow. It doesn't make much sense, I know...

它的要点是你在列的底部分配了大量的填充，并且相同大小的负边距。然后将列放在具有overflow：hidden set的容器​​中。或多或少的填充/边距值允许框保持扩展，直到它到达包装器的末端（由具有最多内容的列确定），并且填充产生的任何额外空间被切断为溢出。它没有多大意义，我知道......

<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;
}

Be sure to read the entire article I linked to, there are a number of caveats and other implementation issues. It's not a pretty technique, but it works fairly well.

请务必阅读我链接的整篇文章，有一些警告和其他实施问题。这不是一个漂亮的技术，但它运作得相当好。

#4

You can do it in jQuery really simple, but I am not sure JS should be used for such things. The best way is to do it with pure css.

你可以在jQuery中做到这一点非常简单，但我不确定JS应该用于这样的事情。最好的方法是使用纯css。

1. Take a look at faux columns or even Fluid Faux Columns

   看一下人造柱甚至流体人造柱

2. Also another technique(doesn't work on the beautiful IE6) is to position:relative the parent container. The child container(the nav list in your case) should be positioned absolute and forced to occupy the whole space with 'top:0; bottom:0;'

   另一种技术（不适用于漂亮的IE6）是相对于父容器的位置：子容器（在你的情况下是导航列表）应该是绝对的，并强制占用整个空间'top：0;底部：0;”

#5

This is one of those perfectly reasonable, simple things that CSS can't do. Faux Columns, as suggested by Silviu, is a hacky but functional workaround. It would be lovely if someday there was a way to say

这是CSS无法做到的完全合理，简单的事情之一。 Silviu建议，Faux Columns是一种hacky但功能性的解决方案。如果有一天有办法说，那将是可爱的

div.foo {
height: $(div.blah.height);
}

#6

This can be done with css using background colors

这可以使用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>

#7

@hoyhoy

@hoyhoy

If a designer can make this work in html, then he can have this design. If he is a true master of web design, he will realize that this is a limitation of the media, as video is not possible in magazine ads.

如果设计师可以用html进行这项工作，那么他就可以拥有这种设计。如果他是网页设计的真正主人，他会意识到这是媒体的限制，因为杂志广告中无法播放视频。

If he would like to simulate weight by giving the 2 columns equal importance, than change the borders, so that they appear to be of the same weight, and make the colors of the borders contrast to the font color of the columns.

如果他想通过赋予2列相同的重要性来模拟权重，那么改变边框，使它们看起来具有相同的权重，并使边框的颜色与列的字体颜色形成对比。

But as for making the physical elements the same height, you can only do that with a table construct, or setting the heights, at this point in time. To simulate them appearing the same size, they don't have to be the same size.

但至于使物理元素具有相同的高度，您只能在此时使用表格构造或设置高度。为了模拟它们看起来相同的尺寸，它们不必具有相同的尺寸。

#8

Come to think of it, I've never done it with a bottom border on the column. It's probably just overflowing, and getting cut off. You might want to have the bottom border come from a separate element that's part of the column content.

想想看，我从来没有用柱子的底部边框做过。它可能只是溢出，并被切断。您可能希望底部边框来自作为列内容一部分的单独元素。

Anyway, I know it's not a perfect magic bullet solution. You might just have to play with it, or hack around its shortcomings.

无论如何，我知道这不是一个完美的魔术解决方案。你可能只需要玩它，或者解决它的缺点。

#9

There is also a Javascript based solution. If you have jQuery, you can use the below plugin.

还有一个基于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>

#10

I use this to align 2 columns with ID "center" and "right":

我使用它来对齐ID为“center”和“right”的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);
}

Hope it helps.

希望能帮助到你。

#11

To grow the left menu div with same height as the right content div.

增长左侧菜单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>