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;
我出于某种原因对我的内容使用position:absolute所以我说清楚:两者都在css文件中。但是,内容仍然覆盖在我的页脚上。
如果页脚没有内容,我该怎么办?
不允许clear:both
为位置工作:绝对吗?
答案 0 :(得分:2)
因为clear: both
清除浮动,所以没有别的。你没有任何花车需要清理。
P.S。你的设计有很多问题。我建议你开始阅读CSS。