Question

我想实现以下目标：

“主要”div和侧边栏“div”应具有相同的高度，最小高度（可能是浏览器的屏幕高度或700px）最大高度不受限制 - 根据内容。
“content”div应该包装它们（两者的高度和宽度相同）

标记：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="StyleSheet2.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div id="wrap">

      <div id="content">                
        <div id="main">
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>          
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>         
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>                      
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>    
        </div>      
        <div id="sidebar"></div>
      </div>
      <div id="footer">
          <p>Footer</p>
      </div>

    </div>
</body>
</html>

CSS：

body, html
{
    margin: 0;
    padding: 5px;
    color: #000;
    background: #ace187;
    height:100%; 
}
#wrap
{
    width: 752px;
    height:100%; 
    margin: 0 auto; 
}

#content
{
    border: 1px solid #000000;
    height: 100%;
    background-color: #dbeef8;
}
#main
{
    float: left;
    width: 506px;
    padding: 10px;   
    border: thin dashed green;
   height: 100%;
}

#sidebar
{
    border: thin dashed #FF0000;
    float: right;
    width: 200px;
    padding: 10px;
    height: 100%;
}
#footer
{
    clear: both;
    padding: 5px 10px;
    background: #cc9;
}

注意：有一个“wrap”div，它也是必需的，因为它包含了我省略的标题。

Answer 1

回答你的第二个问题：

#content
{
    border: 1px solid #000000;
    height: 100%;
    background-color: #dbeef8;
    /* new part */
    overflow: hidden;
}

你的第一个问题有点困难。按照我的偏好顺序（取决于具体情况）：

您可以使用#main，＃sitebar和#content。
您可以使用javascript获取最高的列，并将该高度应用于另一列。
如果不要求使用IE6和IE7（通常较旧的浏览器......），则可以使用display:table和display:table-cell。

我害怕，不可能使用跨越纯粹的CSS。

Answer 2

我一直在阅读关于实现这一目标的低级CSS黑客，或者伪造它。

冒着引起CSS纯粹主义者的愤怒的风险，无论什么时候出现这种情况，我都会使用表格。 “语义和演示”应该被诅咒，只要CSS不能为这样的普通问题提供合理的解决方案，我就会坚持使用有效的方法。

如果您可以保证您的页面始终显示在启用JavaScript的浏览器中，则可以动态调整大小。但这远非我的第一选择。

Answer 3

虽然我不喜欢CSS表达

height:expression("selector".Height< min-height? min-height : "auto" );

Answer 4

具有纯CSS的等高柱。自从你要求它以后，我增加了一个最小高度。由于IE6不了解最小高度，但是将高度视为最小高度，因此有一个IE6黑客纯粹用于最小高度。这是此版本的条纹版本。http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

#container2 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#ffa7a7;}
#container1 {
float:left;
width:100%;
position:relative;
right:50%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:46%;
position:relative;
left:52%;
overflow:hidden;
_height:700px;
min-height:700px;
}
#col2 {
float:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
_height:700px;
min-height:700px;
}


<div id="container2">
<div id="container1">
    <div id="col1">
        <p>some text</p>
    </div>
    <div id="col2">
        <p>some text</p>
    </div>
</div>

Answer 5

以下是您在评论中引用的“愚蠢表格”页面http://hotdesign.com/seybold/everything.html的作者所得到的答案。我想如果他打算向人们提出这个建议，我不妨问他如何解决这个问题。

嗨Carl，

你可以浮动所有三个，包裹，内容和侧边栏。这将包含一切。如果在背景上放置背景图像，侧边栏的高度似乎与主要内容相同。

或者你可以在wrap上使用overflow：auto。那也包含花车。

但是，我并不主张坚持不懈地遵守CSS布局。 99％的时间，他们是要走的路。但另外1％的时间，表格是唯一可行的答案。

表格单元格是HTML中仅的元素，可根据相邻元素的内容和尺寸调整大小。

我很高兴您认为网站很漂亮。我希望你能找到其他有价值的东西。

干杯，

比尔

我很高兴看到他同意我的看法，总是避开桌子是不切实际的。

设置div的高度以占用内容布局

5 个答案: