设置div的高度以占据内容布局答案

【问题标题】：Set div's height to occupy the contents layout设置div的高度以占据内容布局
【发布时间】：2009-12-10 18:10:55
【问题描述】：

我想实现以下目标：

“主”div 和侧边栏“div”的高度应相同，最小高度（可能是浏览器的屏幕高度或 700 像素）最大高度不受限制 - 视内容而定。
“内容”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;
}

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

【问题讨论】：

标签： html css layout

【解决方案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 是不可能的。

【讨论】：

【解决方案2】：

使用纯 CSS 的等高列。自从您要求以来，我添加了一个最小高度。有一个 IE6 hack 纯粹是为了最小高度，因为 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>

【讨论】：

是否可以修改为使用像素的宽度和位置而不是百分比？
抱歉，我不在，没有看到您的问题。它应该适用于 px 而不是百分比。如果不出意外，在具有列的容器之一上放置一个像素宽度应该会产生预期的效果。

【解决方案3】：

我一直在阅读有关实现此目的或伪造它的低俗 CSS hack。

冒着引起 CSS 纯粹主义者愤怒的风险，每当我遇到这种情况时，我都会使用 tables。 “语义和表示”该死，只要 CSS 不能为此类常见问题提供明智的解决方案，我就会坚持使用有效的方法。

如果您可以保证您的页面将始终显示在支持 JavaScript 的浏览器中，您可以动态调整大小。但这远非我的首选。

【讨论】：

我不想使用表格...表格不适合懒惰的恕我直言
是的，我同意。使用最好的工具来完成这项工作。评估您的要求并以最少的努力实施满足所有要求的要求。
为什么表格布局很愚蠢：hotdesign.com/seybold/everything.html
那么这个公认的非常漂亮的网站是否为您的问题提供了解决方案？
它提供了一种我需要找到解决方案的方法

【解决方案4】：

虽然我不喜欢 CSS 表达式

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

【讨论】：

msdn.microsoft.com/en-us/library/ms537634(VS.85).aspx：从 Windows Internet Explorer 8 开始，动态属性已被弃用，仅支持以 IE5 模式或 IE7 模式显示的网页。
如果动态属性确实被弃用了，那就没用了。

【解决方案5】：

以下是我从您在 cmets 中引用的“愚蠢表格”页面http://hotdesign.com/seybold/everything.html 的作者那里得到的答案。我想如果他要努力向人们提供这个建议，我不妨向他请教如何解决这个特殊问题。

你好，卡尔，

您可以浮动所有三个，即换行、内容和侧边栏。那将包含一切。如果您在包装上放置背景图像，则侧边栏会与主要内容的高度相同。

或者您可以在包装上使用溢出：自动。这也将包含浮动。

但是，我不提倡毫不妥协地坚持 CSS 布局。 99% 的时间，他们是要走的路。但在另外 1% 的时间里，表格是唯一实用的答案。

表格单元格是 HTML 中的唯一元素，它们会根据相邻元素的内容和尺寸调整大小。

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

干杯，

比尔

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

【讨论】：

感谢您的时间和精力。 chrismjones 回答了我的问题。
酷，重要的是思想。我不会因为名誉而受到伤害:)