防止浮动DIV从重叠页脚 [英] Prevent floating DIVs from overlapping footer
问题描述
我试图设计一个包含标题，两列和页脚的页面。我不想为页面显示滚动条，但允许列在数据溢出时滚动。
I'm trying to design a page with a header, two columns and a footer. I don't want a scroll bar to appear for the page, but allow the columns to scroll if the data overflows.
目前我最好的尝试是：
HTML
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
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> ）。
but the content in the right div flows over the footer (and even past the end of the <body>).
上面代码的JSFiddle： https://jsfiddle.net/gcd7d238/
JSFiddle of the above code: https://jsfiddle.net/gcd7d238/
推荐答案
为了防止它超出页脚，您只需更改内容高度即可：
To prevent it from going over the footer, all you need to do is change the content height:
.content > div {
float: left;
height: 90%;
overflow: auto;
}
小提琴： https://jsfiddle.net/gcd7d238/2/
更新：
为使其更具响应性，您可以使用 display：table ：
To make it more responsive you can use display:table:
body{
display: table;
}
.content {
display: table-row;
height: 95%;
}
footer {
display: table-row;
width: 100%;
}
https://jsfiddle.net/gcd7d238/3/
这篇关于防止浮动DIV从重叠页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
