Question

I wrote this codepen that does not work.

HTML

<div class="a"> 
<div class="b">  variable content length  variable content length  variable content length  variable content length  variable content length  variable content length  variable content length 
  <div class="c"> </div>
  </div>
</div>

CSS

.a{
  height: 500px;
  width: 70px;

}

.c{
  height: 50%;
  background-color: red;
  display: inline-block;
}

a只是一个容器 b是具有可变内容大小的内容div。

有办法吗？ c也可以有position。但是：.c必须是其变量父级的一半

Answer 1

也给b一个高度：

.b {
   height: 100%;
}

要以％为单位设置元素的高度，其父级也必须具有高度属性（以px或％为单位（相同规则，如果它为＆＃39; s％）。）

如果高度是动态的，请将a-element的overflow属性设置为auto。

Answer 2

这是一个工作解决方案。请注意，我为了清晰起见改变了一些颜色，对不起。

http://codepen.io/anon/pen/WrvLJv

.a{
  height: 500px;
  width: 70px;
  background:blue;
  overflow-y:hidden;
}

.b{
  width:100%;
  background:grey;
  position:relative;
}

.c{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height: 50%;
  background-color: red;
  display: inline-block;
  z-index:99999;
}

引入的变化：

1。将position:relative添加到.b，将position:absolute添加到.c，同时将.c放在左上角。

2。分别为width添加了height和.c，分别为100％和50％。

如果我没记错的话，剩下的只是为了示范目的。希望我明白你的问题，并帮助我。顺便说一句，尝试在文本中添加更多内容，看看它是否适合您。

将高度设置为其父级的％，高度为：auto

2 个答案: