0

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

在 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;

}

页脚代码显示在页面中间，可能在您可以在此处看到的侧边栏的末尾。页脚为黑色。

4

2 回答 2

2

position: absolute在#main-contentCSS 中删除。你不需要它。如果您绝对定位一个元素，那么这超出了文档流。

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

于 2012-09-30T09:04:22.123 回答
1

删除padding-right: 20px和position: absolute属性div.#main-content

于 2012-09-30T09:04:14.193 回答