將div擴展到頁面底部
[英]Extending div to bottom of page
問題描述
當瀏覽器視口比頁面內容高時，將帶有漸變背景的div（嵌套在body標簽中）擴展到頁面底部時出現問題。
我知道我可以將html，body和相應的div標簽設置為100％，但是當我這樣做時，div標簽的高度等於html和body標簽的高度，該高度由視口的大小設置。 即使視口的高度不超過頁面，這也會在div中包含的內容下方創建過多的空間（如果視口太大）。 否則，它會切斷div中的內容，並且視口不會向下滾動（如果視口的尺寸很小）。
您可以在matthewelliot.com上看到此問題。 如果縮小到25％，則在內容填充＃addition-gradient div后，底部的白色漸變會打入背景圖像。 您可能會問，那么，誰將縮小那么遠？ 但是，當我在iPhone上使用“肖像”功能訪問該網站時，便注意到了這個問題，並且我相信其他許多人也會有同樣的經歷。
讓我知道您是否需要更多代碼來幫助診斷！
2 個解決方案
解決方案1
1 2012-11-18 22:54:26
快速而骯臟的解決方法是將高級div（title_bar，nav_bar等）放入包裝div中，將背景應用於包裝，並使正文背景變為白色。 但是我敢肯定有一個純粹的CSS3解決方案。 我會嘗試找到它。
解決方案2
1 2012-11-19 03:33:21
您正在尋找的是粘性頁腳：
* {
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中的空格擴展到頁面底部
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.