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

添加粘性页脚列的问题

1 个答案: