粘頭，粘腳（可變高度），流體中間？

我想在CSS中放置一個簡單的3行佈局。它需要：粘頭，粘腳（可變高度），流體中間？

的主容器的div（100％的寬度，100％高度），其保持...
- 粘滯頭部（48像素的固定高度）
- 的中間部，填補所有剩餘空間之間的頁眉和頁腳
- 粘滯頁腳（62px的初始高度，但通過javascript頁面加載之後可以改變）

這裏是我到目前爲止有：

HTML

<body> 
    <div id="container"> 
     <div id="headContainer"> 
      ... 
     </div> 
     <div id="bodyContainer"> 
      Stuff goes here 
     </div> 
     <div id="footContainer"> 
      ... 
     </div> 
    </div> 
</body>

CSS

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

body { 
    background-color:#2c3e50; 
} 

div#container { 
    height:100%; 
    width:100%; 
} 

div#headContainer { 
    background-color:#e74c3c; 
    height:48px; 
    width:100%; 
    z-index:1; 
} 

div#bodyContainer { 
    overflow:auto; 
    width:100%; 
    top:48px; 
    position:absolute; 
    background-color:#FFFFFF; 
} 

div#footContainer { 
    background-color:#c0392b; 
    width:100%; 
    position:absolute; 
    bottom:0; 
    padding:11px 18px; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; /* Firefox */ 
    -webkit-box-sizing:border-box; /* Safari */ 
}

http://jsfiddle.net/MsKaj/2/

我掙扎摸出我怎麼弄的'bodyContainer'填充頁眉和頁腳之間的可用空間。如果頁腳的大小是固定的，這會更容易！

任何提示？

來源

2013-10-07 Mike

你想在這個意義上粘頁腳，它會留在屏幕的底部，而不是與頁面滾動？ – Coop

是的。所有內容都將位於bodyContainer中，應該可以滾動。頁眉和頁腳應分別保留在頁面的頂部和底部。 – Mike

@Coop我有這個問題！怎樣才能使它隨着滾動而移動？謝謝 – equisde

這裏的所有其他解決方案都過時了，或者訴諸於JavaScript，或者不支持可變高度頁腳。

隨着CSS flex model的出現，解決變高度粘性頁腳問題變得非常容易：雖然大多數人都知道在水平方向上佈置內容，但實際上Flexbox對垂直佈局問題也同樣適用。您只需將垂直部分包裹在柔性容器中，然後選擇要展開的部分。他們會自動佔用其容器中的所有可用空間。

注意標記和CSS是多麼簡單。沒有表黑客或任何東西。

flex模型是supported by all major browsers以及據稱IE11 +，雖然我的IE不能正確呈現此代碼段。

html, body { 
 
    height: 100%; 
 
} 
 

 
#headContainer { 
 
    background: yellow; 
 
    height: 100px; /* can be variable as well */ 
 
} 
 

 
#wrapper { 
 
    display: flex; /* use the flex model */ 
 
    min-height: 100%; 
 
    flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */ 
 
} 
 

 
#bodyContainer { 
 
    flex: 1; 
 
    border: 1px solid orange; 
 
} 
 

 
#footContainer { 
 
    background: lime; 
 
}

<div id="wrapper"> 
 
    <div id="headContainer">Title</div> 
 
    <div id="bodyContainer">Stuff goes here</div> 
 
    <div id="footContainer"> 
 
    Footer<br/> 
 
    of<br/> 
 
    variable<br/> 
 
    height<br/> 
 
    </div> 
 
</div>

來源

2014-10-25 00:22:04

-2

地說：

height: 100%;

上的div＃bodyContainer

此外，考慮將位置：固定;在頁眉和頁腳，並將其固定在屏幕上，並分別在屏幕的頂部到底部...

來源

2013-10-07 08:58:56

謝謝。爲bodyContainer將100％的高度添加到頁腳下方，因爲我給了它的頂部偏移量使它位於頁眉下方。我現在會亂搞固定的定位。 – Mike

只需爲您的內容添加一個底邊，即與粘性頁腳高度相同的內容。。。 –

頁腳高度動態。它可以在頁面加載後通過jQuery進行更改。當它變得更高時，我需要它擠壓bodyContainer。 – Mike

-2

你可以把它像這樣（固定頁眉和頁腳）

HTML：

<div class="header">header</div> 
<div class="content">content</div> 
<div class="footer">footer</div>

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
.header, .footer { 
    position: fixed; 
    width: 100%; 
    height: 48px; 
    left: 0; 
    background: lightgreen; 
} 
.header { 
    top: 0; 
} 
.footer { 
    height: 62px; 
    bottom: 0px; 
} 
.content { 
    min-height: 100%; 
    background: lightblue; 
    padding: 48px 0 62px 0; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}

而一個DEMO。

來源

2013-10-07 09:11:09 LinkinTED

謝謝！在這個例子中，我們假設頁腳是固定大小，事實並非如此。我需要'content'div來使用頁眉和頁腳之間的所有可用空間，無論頁腳大小如何。 – Mike

你正在使用JS來改變內容，你不能改變頁腳大小和填充相同的功能？ – LinkinTED

我可以做。這可能是我現在要採用的路線，但我希望有一個基於CSS的解決方案！ – Mike

粘頭，粘腳（可變高度），流體中間？

回答

相關問題