Question

首先让我说，当有 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中单击添加内容几次），我需要 main 框放大，页脚相应移动。

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

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

Answer 1

再次阅读this sticky footer关于CSS技巧的帖子并稍微修补一下后，我找到了一个不需要任何标记更改的干净解决方案（只能使用3个容器： header ，主和页脚），也根本不使用 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;
}

您可能希望将边距应用于主而不是标题和页脚。

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

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

1 个答案: