我的页面具有导航栏+内容+页脚结构。在页脚上,我有margin-top
。当内容溢出时,边距将被忽略,并且内容和页脚之间没有空格。我想将我的内容设置为可滚动,但是溢出overflow-y: hidden/auto/scroll/visible
无效。内容和页脚是分开的。
此页面上有三个表。我正在为该项目使用引导程序。
我的代码:
<!--NAVBAR-->
...
<!--CONTENT-->
<div class="container" >
<div class="row">
<div class="col">
<div>
<h1>title1</h1>
<table class="table table-striped table-hover table-bordered">...</table>
</div>
<div>
<h1>title2</h1>
<table class="table table-striped table-hover table-bordered">...</table>
</div>
<div>
<h1>title3</h1>
<table class="table table-striped table-hover table-bordered">...</table>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div id="footer">
<div class="container">
<div class="row">
<div class="col-sm-8">
<!--FOOTER CONTENT-->
</div>
</div>
</div>
</div>
Footer CSS:
#footer {
margin-top: 3rem;
position: fixed;
width: 100%;
padding: 5px;
bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
z-index: 999;
}
我的技巧很简单,添加:<div class="clear"></div>
在中间的页脚和容器中
css:
.clear {
float: none;
clear: both;
}
在#footer CSS中添加:float: left;