我有几个 DIV 元素结构,一个放在另一个下面。
<div id="app">
<div id="title">Title</div>
<div id="block1">Block 1</div>
<div id="block2">Block 2</div>
<div id="content">CONTENT</div>
</div>
#title
、#block1
和 #block2
具有固定高度,我希望内容占用 100% 的可用空间并且也会有 overflow-y: auto
即当内容不适合时会有滚动条。
我该怎么做? 我读过有关使内容绝对定位并将其底部设置为 0px 并将其顶部设置为其他 DIV 高度的摘要的想法。但是,我可以在内容 block 上放置更多 DIV 元素,并且不想一直更改其 CSS。
我还设置了:
html, body, #app {
height: 100%
}
但是当我将 #content
设置为 100% 高度时,它会越过屏幕底部,这不是我需要的。我希望 #app
的高度为 100%,而 #content
恰好适合它,在需要时显示滚动条。
这是 jsFiddle - http://jsfiddle.net/ZNFcd/
有什么帮助吗?由于其 Intranet 应用程序,因此也欢迎仅适用于 chrome + CSS3 解决方案的解决方案。
谢谢。
最佳答案
jQuery 选项
var contentHeight = function () {
var w = $(window).height();
x = $('#title').height();
y = $('#block1').height();
z = $('#block2').height();
h = w - x - y - z - 3; // -3 to account for borders
$('#content').height(h);
};
$(document).ready(contentHeight);
$(window).resize(contentHeight);
API documentation for .height()
为此使用一个小脚本的优点是更加灵活。尝试添加或删除内容或更改其他 div 的高度。
纯 CSS 选项
#app {
border: 1px solid green;
height: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box
}
#title {
height: 20px;
}
#block1 {
height: 30px;
}
#block2 {
height: 40px;
}
#content {
height: 90%; /* fallback for browsers without support for calc() */
height: calc(100% - 90px);
border: 1px solid red;
box-sizing:border-box;
-moz-box-sizing:border-box
}
Documentation for calc()
Documentation for box-sizing
我个人会选择 jQuery 选项,calc()
很酷,但它在 Opera 中不受支持并且在 Safari 中存在“错误”。
关于html - 使用 overflow-y 使 DIV 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16798691/