全部高度和宽度，固定标题，全部内容高度与CSS

问题描述：

我一直在搜索这个SO，但我找不到完全相似的东西。我试图实现的是有一个页面，这是一个高度和宽度完整，但确实有一个固定的标题。内容高度需要剩余的剩余区域，但该区域需要有100％的高度，在SO上找到的大多数html代码仅使用height：auto。基本上，我想这样做，这样我可以设置样式：添加边框等。这里是到目前为止的代码：全部高度和宽度，固定标题，全部内容高度与CSS

<html> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
    body, html { 
    height:100%; 
    } 

    body { 
    margin:0; 
    padding:0; 
    } 

    #header{ 
    height:50px; 
    background:green; 
    width:100%; 
    } 

    #wrapper { 
    background:blue; 
    position:relative; 
    min-height:100%; 
    height:auto !important; 
    height:100%; 
    } 

    #content { 
     margin: 10px; 
     background-color: black; 
     height: 100%; 
     width: 100%; 
border: 3px dashed gray; 
    } 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
    <div id="header">header</div> 
    <div id="content"></div> 
    </div> 
</body> 
</html>

所以......有什么问题呢？ – Nayish

问题是，如果您为#content设置100％的高度，则不会占用剩余空间（应为100％-50像素）的100％，但总共需要100％。 – dandoen

答

参见：http://jsbin.com/agiyer

注意，如果含量太高而无法装进#content，它将被简单地隐藏起来。

HTML：

<div id="header">header</div> 
<div id="content">content</div>

CSS：

#header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
    background: green 
} 
#content { 
    position: absolute; 
    top: 50px; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    border: 3px dashed gray; 
    background: #ccc 
}

这是一个美丽的解决方案！ – Nayish

确实很美！但是，一个小问题是，如何将内容放在＃内容中，例如宽度和高度均为100％。已经做了一些更改：http://jsbin.com/agiyer/4/，但滚动条出现时，它不应该。非常感谢！ – dandoen

@dandoen：喜欢这个？ http://jsbin.com/agiyer/5 – thirtydot

全部高度和宽度，固定标题，全部内容高度与CSS

相关推荐