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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:15:37  来源:igfitidea点击:

Get CSS Div to fill available height

htmlcss

提问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 中(仍然有惊人数量的人在使用,但我会忽略这些并告诉他们更新浏览器)