Question

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

BODY标记上设置的标准背景图像
父级DIV，宽度和高度均为100％，具有透明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 drops阴影图像（因此contentDiv有幻觉有一个阴影），我希望#contentDiv和#parentDiv一直运行到底部浏览器始终。

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

将#parentDiv的高度设置为'auto'将导致dropshadow图像重复到＃contentDiv内容的末尾，但如果#contentDiv没有填满浏览器的全高，则#parentDiv和#contentDiv将突然结束文字结束了。

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

Answer 1

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

编辑：我一直在移动设备上测试我的网页（iPod touch，iPhone和iPad;我还没有测试Android或其他平台），可滚动的div不能在这些设备上运行。

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

Answer 3

我发现你的代码可以很好地运行3个警告：

<!DOCTYPE html>＆lt; - 行为与无声明的巨大差异
＃parentDiv，＃contentDiv {... height：100％...}
火狐

除非内容比浏览器更高，否则DIV是浏览器高度的100％？

3 个答案: