css以父元素高度为百分比

当我们在进行网页布局时，经常会遇到一种情况，就是我们希望子元素的高度可以根据父元素的高度来自适应调整。这种情况下，使用CSS的百分比来设置子元素的高度是一个非常好的选择。

父元素{
  height: 500px;
}
子元素{
  height: 50%;
}

如上代码所示，我们可以通过设置子元素的高度为50%来让子元素的高度根据父元素的高度进行自适应调整。这种方式不仅可以方便地实现网页布局，还可以保证网页响应式设计的良好效果。

需要注意的是，如果父元素的高度是不确定的，那么这种方式就无法实现。在这种情况下，我们可以使用JavaScript来动态计算父元素的高度。

var parentHeight = document.getElementById("parent").clientHeight;
var child = documenet.getElementById("child");
child.style.height = parentHeight * 0.5 + "px";

如上代码所示，我们通过JavaScript动态获取父元素的高度，并计算出子元素需要设置的高度。这种方式虽然比直接使用CSS的百分比要复杂一些，但是可以应对更为复杂和多变的情况。