Css 带最小高度和边框框的IE8布局_Css_Internet Explorer_Internet Explorer 8_Border Box

Css 带最小高度和边框框的IE8布局

css internet-explorer internet-explorer-8

Css 带最小高度和边框框的IE8布局,css,internet-explorer,internet-explorer-8,border-box,Css,Internet Explorer,Internet Explorer 8,Border Box,首先让我说，Internet Explorer 8似乎完全忽略了框大小：边框框；当盒子上也设置了最小高度时，在盒子上声明此帖子确认：现在让我描述一下我需要完成什么。这是我的网站，简化了很多：。Doctype是严格的HTML4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head></head> <body&g

首先让我说，Internet Explorer 8似乎完全忽略了框大小：边框框；当盒子上也设置了最小高度时，在盒子上声明此帖子确认：

现在让我描述一下我需要完成什么。这是我的网站，简化了很多：。Doctype是严格的HTML4.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中单击addcontent几次，我需要放大主框，并相应地移动页脚

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

因为它看起来无法通过使用边框框和最小高度来处理，所以我正在寻找IE8的任何其他解决方案。我唯一想到的是使用calc，即身高：calc100%-200px；但IE8也不支持这一点。顺便说一句，当我在ie8中运行时，我有一个在html元素上有条件地添加ie8类，所以我不需要跨浏览器解决方案——只需要CSS就可以在特定的浏览器中获得所需的布局。

再次阅读关于CSS技巧的帖子并稍加修改后，我找到了一个干净的解决方案，它不需要任何标记更改，只需要3个容器：header、main和footer，也不需要使用框大小。它在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，而不是页眉和页脚

下面是我对这个解决方案的看法：

hi Robert，谷歌css sticky footer，甚至搜索它等等。有很多网站向你展示了如何在不使用框大小的情况下做你想做的事情，但不确定它在ie8中是如何工作的，因为我没有使用min heightCheck这个演示是的，看起来web上有很多关于粘脚的线程。但愿我以前能找到它！发布的一个Vel有一点不同的HTML结构-有一个包含页眉、页脚和main的包装器-但是我打赌我会找到一个可以应用于我的HTML结构的解决方案。所以，谢谢你们两个Vel和Pete。@我上面编辑的评论中的Robert使用了你们的html结构-你们只需要在main和wrapper中添加几个div即可-@Pete看起来应该可以工作，因为现在border box和min height在不同的div上使用，但我需要一些时间来测试它。我会在计算出来后添加一条注释。