具有最小高度和边框框的 IE8 布局答案

【问题标题】：IE8 layout with min-height and border-box具有最小高度和边框框的 IE8 布局
【发布时间】：2014-03-31 09:17:06
【问题描述】：

首先让我说，当设置了 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;
}

我需要的是 footer 在屏幕的最底部和 main 框从顶部到底部填充整个屏幕。此外，当内容变大时（在 JSFiddle 中单击 Add content 几次），我需要将 main 框放大并相应地移动 footer。

它在 Chrome 和 Firefox 中呈现得很好。您可能无法在 IE8 中运行它（它不会呈现 JSFiddle），但 main 上的 border-box 属性被完全忽略，因此 main 框比应有的高 200 像素 - 页脚在屏幕的可见区域下方。

由于使用 border-box 和 min-height 看起来无法处理，我正在寻找任何其他适用于 IE8 的解决方案。我唯一想到的是使用 calc，即 height: calc(100% - 200px); 但 IE8 也不支持。顺便说一句，当在 IE8 中运行时，我有条件在 html 元素上添加 ie8 类，所以我不需要跨浏览器解决方案 - 只需 CSS 即可获得所需的布局在那个特定的浏览器中。

【问题讨论】：

嗨罗伯特，谷歌“css 粘性页脚”（或者甚至在 SO 上搜索它）。有大量网站向您展示如何做您想做的事（不使用 box-sizing）-this is one that I did using box-sizing 但不确定它在 ie8 中是如何工作的，因为我没有使用 min-height 可能没问题跨度>
查看此演示 cssreset.com/demos/layouts/…
是的，看起来网上有很多 sticky footer 线程。希望我以前能找到那个！ Vel 发布的那个 HTML 结构有点不同 - 有一个包含页眉、页脚和 main 的包装器 - 但我敢打赌我会找到一个可以应用于我拥有的 HTML 结构的解决方案。非常感谢 Vel 和 Pete。
@Robert 上面我编辑的评论中的那个使用了你的 html 结构——你只需要在你的 main 和一个包装器中添加几个额外的 div——jsfiddle.net/peteng/9DLeg
@Pete 它看起来应该可以工作，因为现在 border-box 和 min-height 用于不同的 div，但我需要一些时间来测试一下。当我解决它时，我会添加评论。

标签： css internet-explorer internet-explorer-8 border-box

【解决方案1】：

在再次阅读this sticky footer 关于 CSS 技巧的帖子并稍作修改后，我找到了一个不需要任何标记更改的干净解决方案（您只需 3 个容器即可：header , main 和 footer) 也不使用 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。

这是我应用此解决方案的小提琴：http://jsfiddle.net/ttKP3/1/

【讨论】：