首先我要说的是，当设置了 min-height 时，Internet Explorer 8 似乎完全忽略了 box-sizing: border-box; 框上的声明也在上面(这篇文章证实:https://stackoverflow.com/a/11714178/3355252)。
现在让我描述一下我需要完成的工作。这是我的网站(非常简化):http://jsfiddle.net/ttKP3/ . Doctype 是 HTML 4.01 Strict。
<!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 中点击 Add content 几次)，我需要 main 框放大，footer 相应地移动。
它在 Chrome 和 Firefox 中呈现得很好。您可能无法在 IE8 中运行它(它不呈现 JSFiddle)，但是 main 上的 border-box 属性被完全忽略，因此 主框比应有的高 200 像素 - 页脚低于屏幕的可见区域。
由于使用 border-box 和 min-height 似乎无法处理，我正在寻找适用于 IE8 的任何其他解决方案。我唯一想到的是使用 calc，即 height: calc(100% - 200px); 但 IE8 也不支持它。顺便说一句，当我在 IE8 中运行时，我有条件地在 html 元素上添加 ie8 类，所以我不需要跨浏览器解决方案 - 只需 CSS 即可获得所需的布局在那个特定的浏览器中。
最佳答案
再读一遍this sticky footer在 CSS-tricks 上发布并稍微修改一下，我找到了一个不需要任何标记更改的干净解决方案(您可以只使用 3 个容器:header、main 和页脚) 也不使用box-sizing。它也适用于 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;
}
您可能希望将边距应用到main 而不是header 和footer。
这是我应用此解决方案的 fiddle :http://jsfiddle.net/ttKP3/1/
关于css - 具有最小高度和边框框的 IE8 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22757799/