帶有最小高度和邊框的IE8佈局

首先讓我們說，看起來Internet Explorer 8完全忽略了box-sizing：border-box;聲明在一個盒子上，當有一個最小高度設置它以及（本文確認：https://stackoverflow.com/a/11714178/3355252）。帶有最小高度和邊框的IE8佈局

現在讓我來描述一下我需要完成的事情。這是我的網站（非常簡化）：http://jsfiddle.net/ttKP3/。文檔類型是嚴格的HTML 4.01。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<head></head> 
<body> 
    <div id="header">header</div> 
    <div id="main">main</div> 
    <div id="footer">footer</div> 
</body> 

html, 
body { 
    height: 100%; 
    margin: 0; 
} 

#header, 
#footer { 
    height: 100px; 
} 

#main { 
    box-sizing: border-box; 
    min-height: 100%; 
    width: 300px; 
    margin: -100px auto; 
    padding: 100px 0; 
}

我需要的是在屏幕的最底部頁腳和主要箱從頂部到底部填充整個屏幕。此外，當內容變大（點擊添加內容幾次JSFiddle）我需要主框放大和頁腳相應地移動。

它在Chrome和Firefox中呈現得很好。您可能無法在IE8中運行它（它不渲染JSFiddle），但邊框屬性主要被完全忽略，所以主要框比它應該是200px更高 - 頁腳低於屏幕的可見區域。

因爲它看起來像它無法通過使用邊界框和最小高度來處理，我正在尋找一個IE8任何其他解決方案。唯一出現在我腦海的是使用calc，即height：calc（100％ - 200px）;但IE8也不支持。順便說一句，我有一個有條件的添加ie8類html元素，當在IE8中運行，所以我不需要一個跨瀏覽器解決方案 - 只需CSS在特定的瀏覽器中獲得所需的佈局。

來源

2014-03-31 Robert Kusznier

喜羅伯特，谷歌「的CSS粘頁腳」（甚至做它搜索的SO）。有很多網站向你展示如何做你想做的事（不使用框大小） - [這是我使用框大小的一個]（http://jsfiddle.net/peteng/9DLeg/）不知道它如何在ie8中工作，它可以是好的，因爲我沒有使用最小高度 – Pete

檢查此演示http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom -of-page-with-css/ – Vel

是的，它看起來像在網上有很多* sticky footer *的線程。希望我能找到那個！一個Vel發佈了一個不同的HTML結構 - 有一個包含頁眉，頁腳和main的封裝 - 但我敢打賭，我會找到一個解決方案，可以應用於我擁有的HTML結構。所以謝謝你和皮特。 –

讀一次this sticky footer後在CSS-技巧和擺弄了一下後，我發現了一個乾淨的解決方案，不需要任何標記的變化（你可以只用3容器做到：頭，主要和頁腳），也沒有使用框大小在所有。它也適用於IE8。

html, 
body { 
    height: 100%; 
    margin: 0; 
} 

#header, 
#footer { 
    height: 100px; 
} 

#header { 
    margin-bottom: -100px; 
} 

#footer { 
    margin-top: -100px; 
} 

#main { 
    min-height: 100%; 
    width: 300px; 
    margin: 0 auto; 
} 

/* Space for header and footer. */ 
#main:before, 
#main:after { 
    display: block; 
    content: ""; 
    height: 100px; 
}

你可能喜歡的利潤率適用於主要代替頭和頁腳。

這裏是我撥弄該解決方案適用於：http://jsfiddle.net/ttKP3/1/

來源

2014-03-31 13:00:50

帶有最小高度和邊框的IE8佈局

回答

相關問題