4

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

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

您可以在matthewelliot.com上查看该问题。如果你缩小到 25%，一旦内容填充了#addition-gradient div，你会看到底部的白色渐变会进入背景图像。你可能会问，那么谁会缩小这么远呢？但是当我在 iPhone 上拿着它“肖像”访问该网站时，我注意到了这个问题，我相信很多其他人都会有同样的经历。

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

4

2 回答 2

1

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

* {
    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/

于 2012-11-19T03:33:21.797 回答
1

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

于 2012-11-18T22:54:26.470 回答