Question

我有一个100％宽，180像素高的div - 标题。

在下面我想要一个以白色背景延伸到底部的div - 内容div。我目前实现的方式是内容div总是在浏览窗口下方180px（几乎像180px向下滚动，无论浏览器窗口大小）。

以前我试过转过来：隐藏了，但是对于实际的内容，它可能需要向下滚动，所以我不想禁用这个功能。

下面是我想要的图画：

enter image description here

有没有人知道如何抵消这种情况？

编辑：

道歉，不清楚。我想在所有情况下将内容div拉伸到窗口的底部，但是将值设置为100％对我没有任何好处，因为它比视口低180px，因为标题会将其推下来。

Answer 1

<!DOCTYPE html><html><head></head><body style='background:black;'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:180px;' align='center'><div style='width:900px;background:blue;'>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div></div>
<div style='position:absolute;width:100%;height:180px;left:0px;top:0px;background:white;;'>header</div>
</body></html>

VERSION 2.0（hahah lol）：

<!DOCTYPE html><html><head></head><body style='background:black;'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
    <div style='width:900px;height:100%;background:blue;' align='center'>
        <div style='position:fixed;width:900px;height:100%;background:blue;display:block;' align='center'>
        </div>
    </div>
</div>
<div style='position:absolute;width:100%;left:0px;top:180px;' align='center'>
    <div style='width:900px;' align='center'>


hello<br><br><br><br><br><br><br><br>aaa<br><br><br><br><br><br><br><br><br><br><br><br>bbb<br><br><br><br><br><br><br><br><br><br>ccc<br><br><br><br><br><br><br>ddd<br><br><br><br><br><br><br><br><br

><br><br><br>eee
    </div>
</div>
<div style='position:absolute;width:100%;height:180px;left:0px;top:0px;background:white;;'>header</div>
</body></html>

尝试一下，我认为这就是你要找的！ :) 所以首先你要添加100％的宽度和高度div来填充整个屏幕，并且所有内部的div位于中心和中心，你会添加另一个diw，这将是900宽度，这里将是所有的内容。之后你添加了100％宽度和180高度的标题，所有这些div的位置都是绝对的，所以你可以输入每个人去的地方。顶部0px左侧0px用于标题，内容顶部180px因此它将成为标题之后！：）

Answer 2

内容div上的

position: relative; top: 0; bottom: 0;。这应该将它拉伸到底部。

Answer 3

这个，你需要有一个内容div和一个内容容器div，容器......包含内容！ :)你需要摆弄这些，直到得到你想要的东西，但主要问题是使用底部：0和每个元素的位置。

content {bottom:0; min-height:180px; position:absolute;}
content-container {position:relative;}

Answer 4

你的想法是正确的，但要记住的一件重要事情是身体和html元素的宽度和高度设置也需要100％。

看看这个例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        body, html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background: gray;
        }
        #header {
            background: red;
            height: 100px;
            width: 100%;
        }
        #main {
            background: blue;
            height: 100%;
            width: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

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

</body>
</html>

如果您运行它，您将看到的唯一问题是出现滚动条。那是因为#main div将具有窗口高度，并且标题中有更多100px。

我建议的解决方案是使标题浮动在主div上，然后在#main内添加另一个div，也绝对定位在100px以下，这样你就可以在里面工作而不会有太多麻烦。完整的代码是：

<!DOCTYPE html>
<html>
<head>
    <style>
        body, html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background: gray;
        }
        #header {
            background: red;
            height: 100px;
            width: 100%;
            position: absolute;
            top: 0;
            z-index: 20;
        }
        #main {
            background: blue;
            height: 100%;
            width: 400px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
        }
        #main #content {
            position: absolute;
            top: 100px;
        }
    </style>
</head>
<body>

<div id="header"></div>
<div id="main">
    <div id="content">
        <p style="margin:0">Paragraph</p>
    </div>
</div>

</body>
</html>

确保使用重置文件。像段落元素这样的边距会使布局变得相当混乱。

<强>更新如上所述，该解决方案带来溢出问题。所以这是一个更好的版本：

按如下方式更改2个css块：

#main {
    background: blue;
    min-height: 100%; /* Changed */
    width: 400px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}
#main #content {
    padding-top: 100px; /* Changed */
}

并确保标记是这样的（就像最后一个例子一样）：

<div id="header"></div>
<div id="main">
    <div id="content">
        <!-- Content goes here -->
    </div>
</div>

这应该可以做到！

Answer 5

我使用了与粘性页脚http://ryanfait.com/sticky-footer/相同的技术。看看这个小提琴http://jsfiddle.net/kuyabiye/K5pYe/

div的棘手定位和尺寸

5 个答案: