防止浮动DIV从重叠页脚
问题描述:
我试图设计一个页眉,两列和页脚。我不想为页面显示滚动条,但是如果数据溢出则允许列滚动。防止浮动DIV从重叠页脚
目前我最好的尝试是这样的:
HTML
<body>
<div>
<h1>Title goes here</h1>
</div>
<div class="content">
<div class="side-text">
<p>Menu Items</p>
<p>Menu Items</p>
<p>Menu Items</p>
<p>Menu Items</p>
</div>
<div class="main-text">
<p>...Snip...</p>
</div>
</div>
<footer>
<p>...snip...</p>
</footer>
</body>
CSS
* {
box-sizing: border-box;
margin: 0;
}
html, body, .content {
height: 100%;
overflow: hidden;
}
.content > div {
float: left;
height: 100%;
overflow: auto;
}
.side-text {
width: 15%;
}
.main-text {
width: 85%;
}
footer {
bottom: 0;
position: absolute;
width: 100%;
}
,但在右边的DIV内容在尾流(甚至是过去<body>
的结尾)。
的jsfiddle上面的代码:https://jsfiddle.net/gcd7d238/
答
为了防止它去在页脚,所有你需要做的是改变内容的高度:
.content > div {
float: left;
height: 90%;
overflow: auto;
}
小提琴:https://jsfiddle.net/gcd7d238/2/
更新:
为了使其更具响应性,您可以使用display:table
:
body{
display: table;
}
.content {
display: table-row;
height: 95%;
}
footer {
display: table-row;
width: 100%;
}
+0
[**不适用于缩小的视口**](https://i.gyazo.com/7b4697491a14f4281a92f68327a5e9d9.png) –
页脚被定位绝对,它总是会在那里流过你的文字。 – VikingBlooded
确实。有没有办法在不使用'position:absolute'的情况下完成同样的定位?把标题div放在最上面,页脚放在最下面,让中间的两个浮动div用完剩余空间?我想我可以把所有的东西放在JS中,但我试图用CSS来做到这一点。 –