化妝DIV採取一切下部空間

比方說，例如：化妝DIV採取一切下部空間

<header>Hello</header> 
<div role="main">Body</div> 
<footer>&copy;</footer> 

header { 
    height:20px; 
    background: #edf1f5; 
} 
div { 
    background:#ddd; 
    padding:20px; 
} 
footer { 
    background: #e4e8ec; 
}

你如何footer佔用所有剩餘空間？我不打算在這裏有一個粘性的頁腳，我只是想要頁腳填補空間。

這裏有一個的jsfiddle：http://jsfiddle.net/XF3E7/

來源

2012-04-25 Michelle

你想要的視覺效果還是什麼？是否可以通過填充「」來實現這一點？ – candyleung 2012-04-25 08:26:44

不考慮視覺效果，頁腳需要伸展到頁面的最底部。 – Michelle 2012-04-25 08:27:30

@JackSpairow爲什麼不是視覺效果？你能向我們解釋一下嗎？在你目前的設計中沒有任何理由。 – noob 2012-04-25 08:38:00

可悲的是我能回答我的問題發揮：

http://jsfiddle.net/XF3E7/14/

來源

2012-04-25 08:53:32 Michelle

我一直使用一個變通此。如果您將主體背景顏色與頁腳相同，則會產生向下擴展頁面的幻覺。 http://jsfiddle.net/ollie/q3xzh/1/

header { 
height:20px; 
background: #edf1f5; 
} 
div { 
background:#ddd; 
padding:20px; 
} 
footer { 
background: #e4e8ec; 
} 
body {background:#e4e8ec;}

來源

2012-04-25 08:26:10 Ollie

如果我將更改您的代碼中的頁腳背景顏色比將會發生的事情，你嘗試它.... – 2012-04-25 08:33:17

哎@Ollie spose我有像這樣的身體和頁腳的不同顏色http://jsfiddle.net/q3xzh/2/ – 2012-04-25 08:33:20

然後你只需將其更改爲任何你需要的顏色。 http://jsfiddle.net/ollie/nqGCb/ – Ollie 2012-04-25 08:36:30

我想你想要這樣的東西？ http://jsfiddle.net/Ralt/XF3E7/5/

但是沒有滾動heh？沒有javascript或使用表格是不可能的。

我確實建議使用@Ollie說的背景顏色。

來源

2012-04-25 08:27:07

我不這麼認爲......設置「footer {height：100％}」是一個壞主意，並且使用表格也是一個壞主意。無表網頁設計已於2002年發明。 – noob 2012-04-25 08:29:41

使用表是一個壞主意，這就是爲什麼我建議使用@ Ollie的解決方案:) – 2012-04-25 08:33:54

你只要用CSS

http://jsfiddle.net/XF3E7/10/

來源

2012-04-25 08:27:57

這個問題是它增加的附加高度，使它可以滾動。 – Michelle 2012-04-25 08:30:09

你的問題的問題是它沒有被指定。你希望頁腳佔據身體的其餘部分，但是你不想讓滾動條出現嘗試用溢出屬性修復它，或者使用javascript來找出窗口高度onload事件和調整大小事件並修復高度呢？ – 2012-04-25 08:37:34

化妝DIV採取一切下部空間

回答

相關問題