可扩展DIV取决于视口

Question

我试图制作一个宽度和高度将根据视口按比例缩小或扩展的div。正如您在上面的例子中看到的，这个方法只会使我的div水平扩展，而不会垂直扩展（固定高度）。如果我试图为包装器或main_content的高度值提供百分比，浏览器会忽略高度值，除非它们以像素或ems为单位。我怎样才能做到这一点？在我看来，如果我能给div的高度一个百分比值，这就能解决问题，对吧？

<div class=".wrapper">
  <div id="main_content"></div>
<div>
.wrapper{
   width: 80%;
   margin : 0 auto;
}
#main_content{
  width : 100%;
  height : 500px;
} 

Answer 1

简短回答：

html, body {
    height: 100%;
}

答案很长：

您的html和body也是容器，它们的高度会随内容自动缩放。不幸的是，当您在包装中设置height: 100%时，高度被设置为容器的100%，这自动是没有填充和边距的包装的高度。解决方案是将html的高度设置为其父对象（实际document）的100%，然后将主体的高度设置为父对象（html）的100%。然后，您的包装器将能够设置为文档高度的百分比。