強制div的高度填充瀏覽器，同時保持頁腳固定
[英]Force height of div to fill browser while keeping sticky footer in place
問題描述
我正在嘗試擴展內容div的高度以填充瀏覽器，同時還實現了粘性頁腳。
我已經使用此方法實現了粘性頁腳-> https://css-tricks.com/snippets/css/sticky-footer/
我似乎無法保持頁腳在適當的位置，同時也迫使內容div填充高度。
我已經搜索了一段時間，但沒有提出任何有用的建議。 任何幫助表示贊賞。
這是我的代碼-> https://jsfiddle.net/rpunumr6/
* { margin: 0; } html, body { height: 100%; background-color: #576772; } .page-wrap { min-height: 100%; margin-bottom: -60px; } .page-wrap:after { content:""; display: block; } .site-footer, .page-wrap:after { height: 60px; } .site-footer { background-color: #7C8B9E; text-align: center; width: 1000px; } header { margin: 0 auto; background-color: #728579; text-align: center; padding: 20px; width: 1200px; } .site-body { background-color: #DCE0D8; width: 880px; margin: 0 auto; padding: 40px; min-height: 100%; height: auto; } h1 { text-align: center; } footer { background-color: #7C8B9E; height: 60px; width: 1000px; margin: 0 auto; }
<title>Page Title</title> <body> <div class="page-wrap"> <header> <nav></nav> </header> <div class="site-body"> <h1>Title</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> </div> <footer class="site-footer"></footer> </body>
2 個解決方案
解決方案1
2 已采納 2015-09-10 07:08:49
只需使用css calc函數來計算.site-body div的height 。
知道了height的的header加上height的的footer ，最后padding的的.site-body ，鈣會讓你減去的百分比值的像素值。
CSS calc（）
calc（）CSS函數可在需要長度，頻率，角度，時間，數字或整數的任何地方使用。 使用calc（），您可以執行計算以確定CSS屬性值。
這是一個例子。
@charset"utf-8"; /* CSS Document */ * { margin: 0; } html, body { height: 100%; background-color: #576772; } .page-wrap { height: 100%; margin-bottom: -60px; } .page-wrap:after { content:""; display: block; } .site-footer, .page-wrap:after { height: 60px; } .site-footer { background-color: #7C8B9E; text-align: center; width: 1000px; } header { margin: 0 auto; background-color: #728579; text-align: center; padding: 20px; width: 1200px; } section { } .site-body { background-color: #DCE0D8; width: 880px; margin: 0 auto; padding: 40px; height: calc(100% - 180px); } h1 { text-align: center; } footer { background-color: #7C8B9E; text-align: center; height: 60px; width: 1000px; margin: 0 auto; }
<title>Page Title</title> <body> <div class="page-wrap"> <header> <nav></nav> </header> <div class="site-body"> <h1>Title</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> </div> <footer class="site-footer"></footer> </body>
解決方案2
0 2015-09-10 06:58:35
我遇到了同樣的問題，發現解決該問題的唯一方法（而不是通過將正文背景色更改為與內容背景色相同來模仿它）是使用Java腳本。 在我使用的代碼段下方。
var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
$( '.site-body' ).css( 'padding-bottom', height_diff ); }
這將檢查窗口和您的身體之間的高度差異，然后在內容底部添加填充以填充屏幕。
我使用此代碼段而不是純CSS，因為我的頁眉和頁腳高度是動態的並且不是固定的。
將透明div層放在高度為100％的另一個div層上方（帶有頁腳！）？
[英]Place transparent div-layer above another div-layer with 100% height (with sticky footer!)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.