Question

我正在使用两个列布局。一个用于主要内容，一个用于侧边栏

在html中我使用以下代码

<div id="content">
     <div id="main-content">
       -----------
       -----------
     </div>

     <div id="sidebar">
      -----------
      ----------
      </div>

 </div>

 <div id="footer">
   ----------
   ----------
 </div>

CSS文件包含以下代码

  #content
{
padding-top:100px;
padding-bottom:50px;
width:1000px;
    margin:0px auto;

}

  #main-content
{

width:720px;
padding-top:250px;
    padding-bottom:30px;
    padding-right:20px;
position : absolute;
}

 #sidebar

{
float:right;
width:270px;
    padding-top:250px;
    padding-bottom:30px;

}

 #footer
{
background: url(../images/footer.jpg) repeat-x;
    width:100%;
clear:both;
    margin:auto;

}

页脚代码显示在页面中间，可能位于侧边栏的末尾你可以看到here。页脚为黑色。

Answer 1

删除position: absolute CSS中的#main-content。你不需要它。如果你绝对定位一个元素，那么这就不在文档流程中了。

在这种情况下，如果您在position: absoulte中设置#main-content，则会忽略其高度以呈现页脚。

Answer 2

从padding-right: 20px

中删除position: absolute和div.#main-content个媒体资源

页脚在html中无法正常显示

2 个答案: