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

Question

我试图制作一个 div，其宽度和高度将根据视口(viewport)按比例缩小或扩大。正如您在上面的示例中看到的那样，此方法只会使我的 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 的高度设置为其父级(实际的 document)的 100%，然后将 body 的高度设置为其父级的 100% , html。然后您的包装器将能够设置为文档高度的百分比。