Question

我正在创建一个包含两个堆叠div的网页。第一个div是横幅，第二个div是内容。我面临的问题是我希望第二个div伸展到页面底部而不创建滚动条。我可以将整个东西包装在另一个div中并将溢出设置为隐藏，但第二个div将填充内容，并且内容可能会超出屏幕。这是我到目前为止所写的内容：

<html>
<head>
<title>test</title>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;    
}

html, body {
    background-color: blue;
    height: 100%;
}

#banner {
    background-color: red;
    width: 100%;
    height: 180px;
}

#content {
    background-color: #0F0F10;
    width: 100%;
    height: 100%;    
    color: #FFF;
}
</style>
</head>
<body>
    <div id="banner"></div>
    <div id="content"></div>
</body>
</html>

Answer 1

通过将#banner包裹在#content容器中，您可以非常轻松地完成此操作：

<div id="content">
    <div id="banner"></div>
    <p>Your content</p>    
</div>

然后在你的CSS中，你必须明确地将body和html上的填充和边距设置为0（通配符不能跨浏览器工作）：

*, html, body {
    margin: 0px;
    padding: 0px;    
}

html, body {
    background-color: blue;
    height: 100%;
}

#banner {
    background-color: red;
    height: 180px;
}

#content {
    background-color: #0F0F10;
    min-height: 100%;    
    color: #FFF;
}

我做的另外两项更改是删除width: 100%规则（因为div是块元素并且默认为阻止元素）并将height: 100%更改为min-height: 100%，因为这样做允许您的#content与其内容一起成长。

如果您需要支持IE6，则必须使用conditional comments为height: 100%提供服务，因为IE6不了解最小高度，但将高度视为最小高度。

你可以看到它in action here。只需删除填充文本，您就会看到滚动条在不再需要时消失。

Answer 2

您可以在不重构HTML的情况下实现相同目标。如果您不想在内容中包装横幅（例如出于语义原因），则应对内容使用绝对定位。您可以在CSS中设置顶部：181px和底部：0，而不是将高度设置为100％。

<html>
<head>
<title>test</title>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;    
}

html, body {
    background-color: blue;
    height: 100%;
}

#banner {
    background-color: red;
    width: 100%;
    height: 180px;
}

#content {
    background-color: #0F0F10;
    width: 100%;
    position: absolute;
    top: 181px;
    bottom: 0px;
    color: #FFF;
}
</style>
</head>
<body>
    <div id="banner"></div>
    <div id="content"></div>
</body>
</html>

Answer 3

我建议使用<table>。将表的高度设置为100％。然后将第一个单元格的高度设置为180px。

然而，当你这样做时，你将需要忽略语义网的遥远嚎叫。

以下是一些示例代码：

<html>
<head>
<title>test</title>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;    
}

html, body {
    background-color: blue;
    height: 100%;
}

table {
    width:100%;
    height:100%;
    border-collapse:collapse;
}

td#banner {
    background-color: red;
    height: 180px;
}

td#content {
    background-color: #0F0F10;
    color: #FFF;
}
</style>
</head>
<body>
    <table>
        <tr><td id="banner"></td></tr>
        <tr><td id="content"></td></tr>
    </table>
</body>
</html>

CSS：如何摆脱滚动（除非有额外的内容）？

3 个答案: