1

首先让我说 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几次），我需要放大主框并相应地移动页脚。

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

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

4

1 回答 1

0

在再次阅读这篇关于 CSS-tricks 的粘性页脚帖子并稍加修改后，我找到了一个不需要任何标记更改的干净解决方案（您只能使用 3 个容器：header、main和footer），也不需要使用box-尺码。它同样适用于 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/

于 2014-03-31T13:00:50.703 回答