Question

我一直在寻找这个，但我找不到完全相似的东西。我想要实现的是拥有一个页面，它的高度和宽度都是满的，但确实有一个固定的标题。内容高度需要是剩下的剩余区域，但该区域需要高度为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>

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

全高＆amp;宽度，固定标题，CSS的全内容高度

1 个答案: