页脚和div之间的动态空间

Question

我正试图找出一种方法，在我的页脚顶部和div之间有一定的空间。

现在每个页面都有不同的大小，我正在手动调整。我遇到的最大问题是不同格式的Web浏览器，我的手动空间正在发生变化。在几页上我有一张js调查表，当调查问卷完成后，我的div在我的背部和下一个按钮上滑下来。我通过为它创建一个新的CSS样式来纠正这个问题。 有没有办法我可以设置我的div（这是一个带有文本的框），以便在每个页面上与页脚和每个浏览器保持相同的距离。现在我的代码只在IE9中正常工作。

这是我正在使用的CSS：

#mainInfoBox
{

margin-bottom:-35px; !important;    
clear:both;
min-height:2em;
height: auto !important;
height:32px;
padding: 2px 3px 0 3px;
border: 1px solid #4c6352;
background-color:#f2f684;
color:#000;
font-family:Tahoma, Geneva, sans-serif;
text-align:center; 
display:block;
position: relative;
}

这就是我在html中使用的内容，尽管每个页面上的值都会发生变化：

<div id="mainInfoBox" style="margin-top:193px; clear:both">Blah Blah Blah</div>

Answer 1

假设您的页脚在每个页面上都相同，您可以设置固定高度，或至少计算它的高度。然后绝对使用底部属性将你想要的div放在它上面：

footer { height: 250px; }
#mainInfoBox { 
    position: absolute;
    bottom: 260px; /* so it is 10px on top of the footer */
}