本文介绍了防止浮动DIV从重叠页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图设计一个包含标题，两列和页脚的页面。我不想为页面显示滚动条，但允许列在数据溢出时滚动。
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： jsfiddle/gcd7d238/
JSFiddle of the above code: jsfiddle/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; }小提琴： jsfiddle/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%; }jsfiddle/gcd7d238/3/
更多推荐
防止浮动DIV从重叠页脚
发布评论