html - 没有位置 :absolute 没有内容时底部的默认页脚

Question

我需要像页眉内容和页脚这样的布局。

我的要求是...

页脚Div的默认位置在底部，即使content Div中没有内容。

当content Div的内容展开时，整个body(包括header,footer)都需要根据content Div展开

我不需要 position:fixed 用于页脚 Div....

我已经在我的元素中尝试了一些代码......

CSS:

             body
            {
                height:100%;
                margin-left: 0;
                margin-top: 0;
                padding:0;
                width:100%;
                position: relative;
                display:block;
            }
            .container
            {
                display:table;
                width:100%;
                height:100%;
            }
            .header
            {
                top:0px;
                height:75px;
                width:100%;
            }
            .content
            {
                width:100%;
                height:auto;
                position: relative;
            }
            .footer
            {
                top:5px;
                bottom:0px;
                height:45px;
                overflow:hidden;
                width:100%;
            }

代码:

<div>
  <div class="header">
      Header Div
  </div>

  <div class="content">
      Content Div
  </div>

  <div class="footer">
      Footer Div(Need it,default at bottom position)
  </div>
</div>

有什么想法吗？

注意:我还需要在IE中运行这段代码......

Answer 1

将以下样式添加到您的 body 标记或 content div 元素:

    div { 
       min-height: 500px; 
       height:auto !important; 
       height: 500px; 
   }

这是有效的，因为 IE 对待“高度”的方式与应该对待“最小高度”的方式相同。