HTML高度100％的原因页溢出

我试图让一个HTML页面2周的div：“顶”和“主”HTML高度100％的原因页溢出

顶部<div>必须考虑其所含元素的地方，主要<div>必须采取所有剩下的地方。

这里是我的尝试：

CSS代码：

html,body{ 
    height:100%; 
} 

#top{ 
    background-color : red; 
    padding:10px; 
    border:1px solid; 
} 

#main{ 
    background-color : blue; 
    height:100%; 
    padding:10px; 
    border:1px solid; 
} 

#content1{ 
    background-color:yellow; 
} 

#content2{ 
    background-color:yellow; 
    height :100%; 
}

HTML代码：

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 

    <div id="top"> 
     <div id="content1">content1</div> 
    </div> 

    <div id="main"> 
     <div id="content2">content2</div> 
    </div> 

    </body> 

</html>

这里是jsFiddle

为y你可以看到，我在“content2”上设置的“100％”使得这个div占据了页面高度的100％，而不仅仅是剩余的空间。有没有一个神奇的CSS属性来解决这个问题？

编辑：

感谢您对您所有的解决方案。

我最终选择了由Riccardo Pasianotto根据CSS属性display:table和display:table-row提出的解决方案。

这是我最后的HTML代码：

<!DOCTYPE html> 
<body> 
    <div id="content1" class="row"> 
    <div class="subcontent"> 
     <div class="subContentContainer"> 
     content1 
     </div> 
    </div> 
    </div> 
    <div id="content2" class="row"> 
    <div class="subcontent"> 
     <div class="subContentContainer"> 
     content2 
     </div> 
    </div> 
    </div>  
</body>

以下是相应的CSS代码：

html,body{ 
    padding:0; 
    margin:0; 
    height:100%; 
    width:100%; 
} 

body{ 
    display:table; 
} 

.row{ 
    display:table-row; 
    width:100%; 
} 

#top{ 
    height:100px; 
} 

#content1{ 
    background:#aa5555; 
    padding:10px; 
} 

#content2{ 
    background:#5555AA; 
    height:100%; 
} 

.subcontent{ 
    padding : 10px; 
    height:100%; 
} 

.subContentContainer{ 
    background-color:yellow; 
    height:100%; 
}

这里是相应Jsfiddle。

来源

2013-06-25 Arnaud Denoyelle

为什么你想有你的主要内容坚守的底部？也许你想在页面的底部有一个页脚？ – Brewal

您错过了HTML中的DOCTYPE。 – Uooo

稍后，我会在黄色区域周围放置一个边框。然后，如果主要内容的高度与区域一样大，我会放置滚动条。对于用户来说，我认为如果这个区域的大小永远不会改变，它就会更干净。 –

DEMOJF

这样做，你必须使用display:table所以编辑以这种方式

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body { 
 
    display: table; 
 
} 
 
.row { 
 
    display: table-row; 
 
    width: 100%; 
 
    background: red; 
 
} 
 
#top { 
 
    height: 100px; 
 
} 
 
#content1 { 
 
    background: yellow; 
 
    height: 100%; 
 
} 
 
#content2 { 
 
    overflow: scroll; 
 
    height: 100%; 
 
    border: 1px solid black; 
 
}

<body> 
 

 
    <div id="top" class="row"> 
 
    <div id="content1">content1</div> 
 
    </div> 
 

 
    <div id="main" class="row"> 
 
    <div id="content2">content2</div> 
 
    </div> 
 

 
</body>

来源

2013-06-25 09:00:12 rkpasia

从你的例子开始，我可以适应它做我想要的：http://jsfiddle.net/b2X4r/ –

当然！我没有时间了！ – rkpasia

将其更新为删除标题的固定大小：http://jsfiddle.net/b2X4r/1/ –

试试这个：

http://jsfiddle.net/5cEdq/16/

CSS：

html,body{ 
     height:100%; 
     Padding:0; 
     margin:0; 
     border:0;}

来源

2013-06-25 08:35:28 falguni

我试过的两款浏览器（Linux和Chrome上的FF）渲染效果不正确。您的浏览器是否正确？ –

不起作用：P –

@MrLister：对不起。我错了。我厌倦了为身体设置高度（我想用footer创建一个应用程序）。但现在我看到这个链接：http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height – Yogee

有一个神奇的CSS属性来解决这个问题？

是的。它被称为box-sizing

阅读this article了解更多关于箱子尺寸属性的信息。

FIDDLE

所以，如果您的标题是说64PX高，那么你会做这样的事情：

.container { 
 
    height: 100%; 
 
    background: pink; 
 
    margin-top: -64px; 
 
    padding-top: 64px; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<header>header</header> 
 
<div class="container"> 
 
    <div class="content"> 
 
    content here 
 
    </div> 
 
</div>

来源

2013-06-25 08:47:37 Danield

我经常做的是使容器没有填充到min-height: 100%，让我的内容有其适当的高度（自动）：

这将使这样的事情：

#container { 
    background-color : #5555AA; 
    min-height: 100%; 
} 
#content2 { 
    background-color:yellow; 
    margin: 10px; 
}

http://jsfiddle.net/5cEdq/25/

我不知道这是否是你想要什么，但你不能让一个div只是“填补其剩余的空间”，而不绝对是绝对的。你也不是很想要。

来源

2013-06-25 08:48:08 Brewal

有没有更好的方式来做到这一点我猜。所以这可能是最好的解决方案。 –

由于这两个Div都使用html和body标签设置的100％高度，因此只需将其设置为那里，然后将您的边距和填充值归零。一般来说，如果你必须将div和它的父div都设置为100％的高度，你就会过度使用它。

来源

2013-06-25 08:48:20 bitmapshades

HTML高度100％的原因页溢出

回答

相关问题