html - 可扩展的 DIV 取决于视口

Question

我试图制作一个宽度和高度将根据视口按比例缩小或扩大的 div。正如您在上面的示例中看到的那样，此方法只会使我的 div 水平扩展而不是垂直扩展（固定高度）。如果我尝试为包装器或 main_content 的高度值提供百分比，浏览器会简单地忽略高度值，除非它们以像素或 em 为单位给出。我怎样才能使这项工作？在我的脑海中，如果我可以给我的 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其父级的 100%，实际document然后将主体的高度设置为其父级的 100% html，. 然后您的包装器将能够设置为文档高度的百分比。