除非内容高于浏览器，否则制作一个 100% 的浏览器高度的 DIV？答案

【问题标题】：Making a DIV that's 100% of the browser height unless content is taller than browser?除非内容高于浏览器，否则制作一个 100% 的浏览器高度的 DIV？
【发布时间】：2011-10-30 04:44:07
【问题描述】：

我正在尝试创建一个包含以下内容的页面：

在 BODY 标签上设置的标准背景图片
宽度和高度均为 100% 的父 DIV，具有透明 PNG 作为背景图像。
可能包含不同数量文本的子 DIV。

所以，结构应该是这样的：

CSS：

html, body {
    width: 100%;
    height: 100%;
    margin: 0 0;
    padding: 0 0;
}
body {
    background-image: url('bgimage1.jpg');
}
#parentDiv {
    width: 100%;
    min-width: 960px;
    height: 100%;
    background-image: url('contentDiv_dropshadow.png');
    background-position: center top;
    background-repeat: repeat-y;
}
#contentDiv {
    width: 800px;
    margin: 0 auto;
    background-color: #DADADA;
}

HTML：

<body>
    <div id="parentDiv">
        <div id="contentDiv">
            <p>Paragraphs of text...</p>
        </div>
    </div>
</body>

基本上，#contentDiv 包含文本条目，#parentDiv 包含透明 PNG 投影图像（因此 contentDiv 有投影的错觉），我希望 #contentDiv 和 #parentDiv 一直运行到底部始终浏览器。

我遇到的问题是，如果我将 #parentDiv 的高度设置为 100%，然后使浏览器窗口小于 #contentDiv 中的内容，则该窗口将获得一个滚动条来查看剩余内容，并且，当我向下滚动时，#parentDiv 不会超出浏览器的初始高度。

将#parentDiv 的高度设置为“auto”会导致阴影图像向下重复到#contentDiv 内容的末尾，但如果#contentDiv 没有填满浏览器的完整高度，#parentDiv 和#contentDiv 都会突然结束正文结束。

如果没有足够的内容将 DIV 推到底部（如高度：100%），是否有非 Javascript 解决方案让这两个 DIV 都达到浏览器的全高，但也超出了浏览器的高度如果内容运行时间更长？

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用overflow: auto; 使其中一个 div 元素可滚动，并将正文保持在 100%。不完全是你的要求，但我认为它会给出你所要求的行为。请注意，如果您在不是 100% 的 div 上执行此操作，滚动条将只是 div 的大小，而不是整个浏览器窗口的大小，这似乎是您想要的，所以我会将其放在 #parentDiv 上。

编辑：我一直在移动设备（iPod touch、iPhone 和 iPad；我还没有测试过 Android 或其他平台）上测试我的网页，并且可滚动 div 不适用于这些设备。

【讨论】：

【解决方案2】：

我尝试过这样的事情......检查一下

<html>
    <head>
    <style type="text/css">

body {
    background-image: url('bgimage1.jpg');
}
#wrapper
{
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    margin:0px;
}
#parentDiv {
    width: 100%;
    min-width: 960px;
    min-height:100%;
    background-image: url('contentDiv_dropshadow.png');
    background-position: center top;
    background-repeat: repeat-y;
    border:solid 1px red;
    position:absolute;
    text-align:center;
    top:0px;
    bottom:0px;
}
#contentDiv {
    width: 800px;
    margin: 0 auto;
    background-color: #DADADA;
    border:solid 1px blue;
    position:absolute;
    text-align:center;
    left:100px;
    top:100px;
    float:left;
}
</style>
</head>

<body>
<div id=wrapper>
    <div id="parentDiv">
        <div id="contentDiv">

            <p>Paragraphs of text...</p>
                        <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>       
        </div>
                <div style="clear:both;" ></div>
    </div>
    <div style="clear:both;" ></div>
    </div>
</body>

【讨论】：

【解决方案3】：

我发现您的代码在 3 个注意事项上运行良好：

<!DOCTYPE html>
#parentDiv, #contentDiv { ... 高度：100% ... }
火狐

【讨论】：