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

【问题标题】：Full height & width, fixed header, full content height with CSS全高和全宽，固定标题，全内容高度与 CSS
【发布时间】：2022-01-02 08:33:40
【问题描述】：

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

<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>

【问题讨论】：

问题是如果你为#content设置100%的高度，它并没有占用100%的剩余空间（应该是100%-50px）但是一共占用了100 %。

标签： html css

【解决方案1】：

见：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
}

【讨论】：

确实很漂亮！不过有一个小问题，我如何将图像放在#content 中，例如宽度和高度为 100%。进行了一些更改：jsbin.com/agiyer/4 但滚动条出现时它不应该出现。非常感谢！