html - 添加带有粘性页脚的列时出现问题

Question

每当我尝试向我的页面添加栏时，我的页脚就会松开并且内容会进入页脚。但是，当我将内容直接添加到持有内容 div 时，它工作得很好。

HTML:

<div id="wrapper">

  <div id="content">
    <div class="left_content">
    </div>
    <div class="right_content">
    </div>
  </div>

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

CSS:

html,
body {
margin:0;
padding:0;
height:100%;
font-family: arial, sans-serif;
}

#wrapper {
min-height:100%;
position:relative;
}

#content {
padding-bottom:96px; /* Height of the footer element */
width: 960px;
margin-left: auto;
margin-right: auto;
}

#footer {
background:#162b83;
width:960px;
height:96px;
position:absolute;
bottom:0;
left:50%;
margin-left: -480px;
}

div.left_content {
width: 500px;
margin-right: 60px;
float: left;
}

div.right_content {
width: 400px;
float: left;
}

Answer 1

您好，我对您的代码进行了一些调整并更新了 here 请检查它，这是你需要的。谢谢。

html

<div id="content">
  <div class="left_content">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.SS</p>
  </div>
  <div class="right_content"> sdfasd </div>
  <div class="footer-outer">
    <div id="footer"></div>
  </div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
}
#content {
    padding-bottom: 96px; /* Height of the footer element */
    width: 960px;
    margin: 0 auto;
}
div.left_content {
    width: 500px;
    margin-right: 60px;
    float: left;
}
div.right_content {
    width: 400px;
    float: left;
}
.footer-outer {
    float: left;
    width: 960px;
    position: relative;
}
#footer {
    background: #162b83;
    width: 960px;
    height: 96px;
    position: absolute;
    bottom: -96px;
    left: 0;
}