代码之家 › 专栏 › 技术社区 › samuel

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

layout css html

samuel · 技术社区 · 16 年前

我希望实现以下目标:

“主”DIV和边栏“DIV”应该具有相同的高度,最小高度(可能是浏览器的屏幕高度或700px)最大高度不受限制-根据内容。
“content”分区应该将它们包装起来(高度和宽度相同)

Markup:

<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,它也需要,因为它包装了一个我省略的头部。

5 回复 | 直到 16 年前

chrismjones 16 年前

高度相等的纯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>

jeroen 16 年前

回答第二个问题:

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

你的第一个问题有点难。根据我的偏好顺序(视情况而定):

你可以用背景为主要网站、网站栏和内容伪造它。
您可以使用javascript获取最高的列,并将该高度应用于另一列。
你可以使用 display:table 和 display:table-cell 如果不需要IE6和IE7(通常是较旧的浏览器…)。

恐怕交叉浏览纯CSS是不可能的。

Carl Smotricz 16 年前

为了达到这个目的,我一直在阅读关于卑鄙的CSS黑客的文章,或者伪造它。

冒着招惹CSS纯粹主义者的愤怒的风险,每当我遇到这种情况,我就用桌子 . "语义和表示“该死,只要CSS不能为类似的普通问题提供合理的解决方案,我就坚持到底。

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

ram 16 年前

虽然我不喜欢CSS表达式

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

Carl Smotricz 16 年前

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

嗨,卡尔,

您可以浮动这三个部分:包装、内容和侧边栏。那会包含所有的东西。如果在包装上放置背景图像,则侧边栏的高度似乎与主要内容的高度相同。

或者可以在包装上使用overflow:auto。它也包含了浮点数。

然而,我并不主张毫不妥协地坚持CSS布局。99%的时候,他们是前进的道路。但其他1%的时间里,表格是唯一可行的答案。

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

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

干杯,

比尔

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