Question

在我的页面上，我有以下html结构：

<body>
   <div id="container1">
      <div id="container2">
         <div id="container3">
            <div id="body">some body content</div>
            <div id="footer">footer content</div>
         </div>
      </div>   
   </div>
</body>

结构不能改变。我需要固定高度的页脚div始终位于页面的底部。如果主体内容扩展并且高于浏览器窗口，则页脚也需要移位，因此它总是低于主体内容。

我需要与链接中描述的解决方案完全相同的内容，但调整为我的html结构：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

我尝试从链接中跟踪CSS，但它不适用于长身体内容 - 正文文本位于页脚下方（页脚应该移位）：

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

解决方案需要在IE8上运行。

Answer 1

您的所有父容器都需要min-height：100％，因为容器3始终必须至少是视口的全高（浏览器高度）。

像这样：

＆＃13;

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container1 {
  min-height:100%;
}
#container2 {
  min-height:100%;
}
#container3 {
   min-height:100%;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

＆＃13;

<div id="container1">
   <div id="container2">
      <div id="container3">
        <div id="body">some body content</div>
        <div id="footer">footer content</div>
      </div>
   </div>   
</div>

＆＃13;

Answer 2

以下是您可以在不使用CSS calc功能的情况下执行此操作的一种方法（不支持 IE8）。

解决方案依赖于IE8支持的CSS表。

诀窍是将display: table应用于包含height: 100%的包装容器元素。表格将高度值视为表格的最小值至少为高度的100％然后根据内容进行扩展。

将display: table-row应用于页脚会导致浏览器将#body视为表格单元格并且高度将填满页脚未使用的包含块的高度。

您可能需要根据详细信息将页脚内容包装在另一个块元素中你的布局。

注意：首先在IE8中测试......至少是有趣的概念验证。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.setMinHeight {
  display: table;
  height: 100%;
}
#body {
  overflow: visible;
  display: table;
  height: 100%;
} 
#footer {
  display: table-row;
  height: 60px;
  background: tan;
}

<div id="container1" class="setMinHeight">
  <div id="container2" class="setMinHeight">
    <div id="container3" class="setMinHeight">
      <div id="body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac tortor cursus, tempor nibh sed, elementum eros. Mauris condimentum magna non posuere commodo. Nunc a lorem at purus molestie placerat ut a mi. Etiam a dui lacus. Etiam pretium
          quam arcu, et tristique ipsum pulvinar non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas ante eros, accumsan sollicitudin tellus a, tempus mattis ante. </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac tortor cursus, tempor nibh sed, elementum eros. Mauris condimentum magna non posuere commodo. Nunc a lorem at purus molestie placerat ut a mi. Etiam a dui lacus. Etiam pretium
          quam arcu, et tristique ipsum pulvinar non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas ante eros, accumsan sollicitudin tellus a, tempus mattis ante. </p>
      </div>
      <div id="footer">footer content</div>
    </div>
  </div>
</div>

div中的页脚和标题

2 个答案: