屏幕底部和页脚之间没有空隙

Question

屏幕底部和页脚之间没有空隙

3

我在创建屏幕底部和最后一个div之间的空间时遇到了问题。

在Chrome中没有问题，但在IE中，边框位于屏幕底部。

<div id="container">
 <div id="header">...</div>
 <div id="main">...</div>
 <div id="footer">...</div>
</div>

最后一个 div 只有 <br /> 标签。

以下是 CSS 代码...

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   top:30px;
   left:15px;
   width:60%;   
   border:black solid 1px;
   min-height:100%;
   position:relative;
}
#header {    
   padding:0px;
}
#body {
   background-color:FAF0E6;
   padding:10px;
   padding-bottom:25px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:10px;
   width:100%;
   height:25px;   /* Height of the footer */
}

像我说的，Chrome中很好用，但在IE中不太好用。

我的要求是屏幕顶部和底部有一些空间。

补充说明：在IE中我甚至看不到下边框。

感谢您的帮助，

- Kris

- Kris.Mitchell

2个回答

0

尝试将border-bottom: solid #FFFFFF 10px;添加到body样式中。在IE8中对我有效。

- Gordon Gustafson

我仍然没有看到任何空间被创建。我在代码中添加了 margin-bottom:25px;。 - Kris.Mitchell

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Please delete me · Accepted Answer

您可以在 #container 中使用 height:100% 替换 min-height:100%。在 IE8 中可行。

编辑：这是您要找的内容吗？

html {
   margin:0;
   padding:0;
}
body {
   background-color:FAF0E6;
   margin-top:35px;
   margin-bottom:10px;
}
#container {
   left:15px;
   width:60%;   
   height:100%;
   position:relative;
}
#header {    
   padding:0px;
}
#footer {
   position:absolute;
   bottom:10px;
   width:100%;
   height:25px;
}