为什么我的内容被我的页脚覆盖,即使我使用清楚:两者都是页脚?

时间:2015-07-12 12:39:49

标签: html css



html,
body{
    height: 100%;
    margin:0;
    padding:0;
}

#fake-content {
    height:900px;
    width:100px;
}

.readbook .col-sm-12 {
  position: relative;
  border-top:2px solid #dddddd; 
}

.book-body {
  position: absolute;
  left:0;
  top:0;
  right:0;
  height:100px;
  padding:0px 70px 0px;
  overflow-y:auto;
}

.body-inner {
  margin-top: 20px;
}

.body-inner {
  border: 1px solid red;
  z-index:1;
  height:500px
}

.navbar-footer {
  background-color: #f8f8f8;
}

.footer {
  text-align: center;
}
.footer p {
  font-size: 10px;
  margin:0;
  text-align:center;
  padding-top:53px;
  display:inline-block;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -120px;
}

.navbar-footer, .push {
height: 120px;
}


.last-content {
  margin-bottom:144px;
}

.navbar-footer {
clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper"> 
<div id="fake-content"></div>
<div class="container readbook">
  <div class="row">
    <div class="col-sm-12">
      <div class="book-body">
        <div class="body-inner">
          <div class="page-wrapper">
            <h4>2.Test</h4>
              <p>
                    Content
              </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="push"><!-- not put anything here --></div>
</div>

<!-- footer -->
    <div class="navbar-footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="footer">
                <p>CO.,LTD @ 2015 ALL Rights Reserved.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
&#13;
&#13;
&#13;

我出于某种原因对我的内容使用position:absolute所以我说清楚:两者都在css文件中。但是,内容仍然覆盖在我的页脚上。

如果页脚没有内容,我该怎么办?

不允许clear:both为位置工作:绝对吗?

1 个答案:

答案 0 :(得分:2)

因为clear: both清除浮动,所以没有别的。你没有任何花车需要清理。

P.S。你的设计有很多问题。我建议你开始阅读CSS。