我正在尝试设计一个带有页眉、两列和页脚的页面。我不希望页面出现滚动条，但在数据溢出时允许列滚动。
目前我最好的尝试是这样的：
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/ https://jsfiddle.net/gcd7d238/
为了防止它超出页脚，您需要做的就是更改内容高度：
.content > div {
float: left;
height: 90%;
overflow: auto;
}
Fiddle: https://jsfiddle.net/gcd7d238/2/ https://jsfiddle.net/gcd7d238/2/
UPDATE:
为了使其响应更快，您可以使用display:table:
body{
display: table;
}
.content {
display: table-row;
height: 95%;
}
footer {
display: table-row;
width: 100%;
}
https://jsfiddle.net/gcd7d238/3/ https://jsfiddle.net/gcd7d238/3/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
