Html 获取 CSS Div 以填充可用高度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2297453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get CSS Div to fill available height
提问by jameszhao00
I have a div with 2 elements.
我有一个包含 2 个元素的 div。
<div id="master">
<div id="follower"></div>
<div id="decider"></div>
<div>
'master' div has the following CSS properties
'master' div 具有以下 CSS 属性
height:auto;
width:auto;
margin:0;
padding:10px;
display:block;
The 'follower' div has the following CSS properties
'follower' div 具有以下 CSS 属性
position:relative;
vertical-align:middle;
height: auto;
display: inline-block;
margin-top: 0px;
margin-bottom:0px;
The 'decider' div decides how tall the 'master' div is. Is it possible for the 'follower' div to fill up as much vertical space in the 'master' div as possible?
'decider' div 决定了 'master' div 的高度。“跟随者”div 是否有可能尽可能多地填充“主”div 中的垂直空间?
I tried height: 100%
but that just made the 'follower' div take up the whole screen (vertically)
我试过了,height: 100%
但这只是让“追随者”div占据了整个屏幕(垂直)
回答by Pete
The master should have
主人应该有
position: relative;
and then the follower should have
然后追随者应该有
position: absolute;
top: 0;
bottom: 0;
That should work, except in IE6 (which an alarming amount of people are still using, but I would just disregard those and tell them to update their browser)
这应该可以工作,除了在 IE6 中(仍然有惊人数量的人在使用,但我会忽略这些并告诉他们更新浏览器)