使內容div填充剩餘高度

我有一個頁面佈局，其中我有一個fixed標題可以有任何高度和頁腳位於頁面的底部。我正在尋找一個CSS解決方案，以便內容div填充剩餘空間（垂直）。在下面的jsfiddle中，我試圖做到這一點，但正如你所看到的內容是在頁腳後面。使內容div填充剩餘高度

HTML：

<main> 
    <header> 
     <ol> 
      <li>bar</li> 
      <li>foo</li> 
     </ol> 
    </header> 
    <section> 
     <div class="content"><div> 
    </section> 
    <footer></footer> 
</main>

CSS：

header { 
    background-color: #abc; 
    z-index: 1000; 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    left: 0px; 
} 

html, body, main, section { 
    height: 100%; 
    display: block; 
} 

.content{ 
    background-color: #000; 
    height: 100%; 
} 

footer { 
    background-color: #def; 
    bottom: 0; 
    display: block; 
    height: 54px; 
    position: absolute; 
    width: 100%;

}

這可能與純CSS（3）？

jsfiddle

來源

2014-09-01 Jeanluca Scaljeri

是您的佈局響應？ – neilhem 2014-09-01 08:49:33

是的，佈局實際上是流體 – 2014-09-01 08:52:45

嘗試定位content是正確的頁腳

bottom: <footer-height>; 
position: absolute;

來源

2014-09-01 08:49:00 JNF

如果我這樣做，我沒有得到一個填充整個空間的div（即使沒有高度設置爲100％） – 2014-09-01 15:47:52

這是一個有點醜陋的解決方案上面，但如果你把內容DIV的上邊距爲-54px並用padding-top添加一個div：54px，它按預期工作。

HTML：

<div class="content"><div class="contentwrapper"></div><div>

CSS：

.contentwrapper { 
    padding-top:54px; 
} 
.content{ 
    background-color: #000; 
    height: 100%; 
    margin-top:-54px; 
}

小提琴：http://jsfiddle.net/dohqn8m4/1/

來源

2014-09-01 08:52:55 JohannesB

我認爲你的解決方案修復了頁腳問題，但現在的內容在標題後面 – 2014-09-01 08:56:59

與以前一樣，在腳本中，內容位於標題的後面 – JohannesB 2014-09-01 09:49:10

除非您的標題具有固定的高度，否則也可能無法通過僅使用css來解決 – JohannesB 2014-09-01 09:49:57

這裏，指出錯誤的做法：

HTML：

<header> 
    <ol> 
     <li>bar</li> 
     <li>foo</li> 
    </ol> 
</header> 
<main> 
    <section> 
     <div class="content"></div> 
    </section> 

    <div class="push"></div> 
</main> 
<footer></footer>

CSS：

html, body { 
     height: 100%; 
     min-height: 100%; 
     margin: 0; 
     padding: 0; 
     border: 0; 
    } 

    header { 
     background-color: #abc; 
     z-index: 1000; 
     position: fixed; 
     top: 0; 
     right: 0; 
     left: 0; 
    } 

    main { 
     min-height: 100%; 
     height: auto !important; 
     margin-bottom: -54px; 
    } 

    main > section{ 
     padding-top: 72px; 
    } 

    .content { 
     background-color: #000; 
    } 

    .push { 
     height: 54px; 
    } 

    footer { 
     background-color: #def; 
     height: 54px; 
    }

現在頁腳總是在底部aslong內容不填洞頁。在這種情況下，「推」元素提供了足夠的空間來拒絕頁腳和內容的重疊。

您的內容div現在通過填充放置在頁腳下。由於缺少內容，高度實際上爲0。在我的方法中，內容div始終適合插入的內容。

請記住， a）爲了響應的目的，您必須瞭解頁眉高度，並使用媒體查詢調整節的填充 b）頁腳相同。調整推動元素的高度並調整邊距底部值。

jsFiddle

來源

2014-09-01 10:15:53

我用這個tutorial做粘頁腳。我認爲使用起來很方便。

CSS代碼

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 
footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
}

HTML代碼

<!DOCTYPE html> 
<head> 
    <title></title> 
</head> 
<body> 
    <nav></nav> 
    <article>Lorem ipsum...</article> 
    <footer></footer> 
</body> 
</html>

DEMO URL

來源

2014-09-01 18:39:58

使內容div填充剩餘高度

回答

相關問題