Html 可扩展的DIV（取决于视口）

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

<div class=".wrapper">
  <div id="main_content"></div>
<div>

.wrapper{
   width: 80%;
   margin : 0 auto;
}

#main_content{
  width : 100%;
  height : 500px;
} 

.包装纸{
宽度：80%；
保证金：0自动；
}
#主要内容{
宽度：100%；
高度：500px；
} 

简短回答： 长答覆： 您的

html

和

body

也是容器，它们的高度可以随内容自动缩放。不幸的是，当您在包装中设置

height:100%

时，高度被设置为容器的100%，这将自动成为包装的高度（无填充和边距）。然后，解决方案是将

html

的高度设置为其父级的100%，即实际的

文档的高度，然后将主体的高度设置为其父级的100%，
html
。然后您的包装将能够设置为文档高度的百分比

html, body {
    height: 100%;
}