Question

当浏览器视口高于页面内容时，我在将具有渐变背景（嵌套在body标签中）的div扩展到页面底部时遇到问题。

我知道我可以将我的html，body和相应的div标签设置为100％，但是当我这样做时，div标签的高度等于html和body标签的高度，这是由大小设置的视口。这或者在其中包含的内容下方的div中创建太多空间（如果视口太大），即使视口不高于页面。或者它会切断div中的内容，并且视口不会向下滚动（如果视口的大小很小）。

您可以在matthewelliot.com查看该问题。如果缩小到25％，一旦内容填充了#addal-gradient div，您就会看到底部的白色渐变突破到背景图像中。你可能会问，那么谁会缩小那么远？但是当我在我的iPhone上访问该网站时，我注意到了这个问题，并且我确信其他人也会有相同的体验。

如果您需要更多代码来帮助诊断，请告诉我们！

Answer 1

快速而肮脏的修复方法是将高级div（title_bar，nav_bar等）放在包装器div中，将背景应用于包装器，并使主体背景变白。但我确信这有一个纯粹的CSS3解决方案。我会试着找到它。

Answer 2

您正在寻找的是一个粘性页脚：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

请看一下：https://stackoverflow.com/a/3525675/1700554

修改

试试这个：

在body标签上创建一个新的DIV，如下所示：

<body> <div class="body2"> PUT ALL OTHER DIVs AND CONTENT IN HERE. </div> </body>

对于像这样的CSS：

body { background-color: #FFFFFF; } .body2 { background-image: url(../_images/bg/bedge_grunge.png); background-repeat: repeat; background-attachment: fixed; }

正如您可以在此jsfiddle中看到的结果（使用原始内容减去css和图像）： http://fiddle.jshell.net/zbaBZ/show/

将div扩展到页面底部

2 个答案: