Question

我使用＆＃34; 100％页面高度＆＃34;来自这个SO答案的模式：

换句话说，我有一个基本的DOM结构：

<hmtml> // has min-height: 100% and position: absolute
<body>  // has height: 100%
    <div id="myApp"> // has // has position:absolute/top: 0/bottom:0
       <div id="inner"> // has no styles (or height: 100%; same difference)

html / body / #myApp一切都很有效：它们都有100％的页面高度。我的问题是div#inner：它不会增长到其父级的高度（即使我给它height: 100%）。

我相信这种情况正在发生，因为#myApp绝对定位，因此没有#inner继承的高度。有没有办法解决这个问题而不向每个嵌套元素添加position: absolute; top: 0; bottom:0？似乎我能以某种方式让#inner从#main获得它的高度我可以让它的所有孩子继承这个高度......但是由于绝对的定位我无法想象如何做到这一点。

任何帮助都将不胜感激。

Answer 1

html, body{ height:100%; margin:0; }

#myApp{
  position:absolute;
  top:0; bottom:0; left:0; right:0;
  background:red;
}

#inner{
  height:100%;
  background:gold;
}

<div id="myApp">
  <div id="inner"> 
    Inner should be gold and it is!
  </div>
</div>

CSS高度（内部绝对定位元素）

1 个答案: