Css 将div扩展到页面底部_Css

Css 将div扩展到页面底部

css

Css 将div扩展到页面底部,css,Css,当浏览器视口高于页面内容时，我在将带有渐变背景（嵌套在body标记中）的div扩展到页面底部时遇到问题我知道我可以将html、body和各自的div标记设置为100%，但当我这样做时，div标记的高度等于html和body标记的高度，这是由视口的大小设置的。这会在div中包含的内容下方（如果视口太大）创建太多空间，即使视口不高于页面。或者它会切断div中的内容，并且视口不会向下滚动（如果视口的大小为小）你可以在网站上看到这个问题。如果你缩小到25%，你会看到底部的白色渐变在内容填充了#add

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

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

你可以在网站上看到这个问题。如果你缩小到25%，你会看到底部的白色渐变在内容填充了#addition gradient div后会进入背景图像。你可能会问，谁会缩小那么远？但我在iPhone上访问这个网站时注意到了这个问题，我相信很多其他人也会有同样的体验

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

快速而肮脏的修复方法是将您的高级div（title\u栏、nav\u栏等）放入包装器div中，将背景应用于包装器，并将主体背景设置为白色。但我相信有一个纯粹的CSS3解决方案。我会尽力找到它。

您要找的是一个粘脚：

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

请看一下这个：

编辑：

试试这个：

在body标记后面创建一个新DIV，如下所示：

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

正如您在这个JSFIDLE中看到的结果（使用原始内容减去css和图像）：

快速而肮脏的方法很有意义，我想看看是否有办法保持结构并执行一点css魔术：）如果你有什么特别之处，请告诉我。我不确定这是否正是我所需要的。我需要到达视口底部的页面部分严格来说不是页脚。事实上，这种渐变只出现在索引页面上，所以我在其他地方没有这个问题。实际的页脚是版权行，它粘贴在每个页面的主要内容下面，不必坐在底部（尽管现在我知道如何做了，也许我会实现它）。我需要的是#addition gradient div的底边与视口底部“粘滞”，但我仍然希望div内容与滑块齐平。我没有仔细检查代码以确保它在每个实例中都是相同的，但这就是我得到的。@TimothyD编辑了我的答案，请看一看。这与@parker.sikand-answer非常相似，如果不完全相同的话。我真的不想改变页面的基本结构，因为网站上的所有页面都引用相同的全局样式表，我必须对所有页面进行更改。我只需要索引页才能生效。我不得不认为，有一种东西可以应用于#加法渐变div，而无需改变其他样式来实现我所追求的外观。

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