我试图制作一个 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;
}
最佳答案
简答:
html, body {
height: 100%;
}
长答案:
您的 html
和 body
也是容器,它们的高度会随着内容自动缩放。不幸的是,当您在包装器中设置 height: 100%
时,高度被设置为容器的 100%,这自动成为包装器的高度,没有填充和边距。解决方案是将 html
的高度设置为其父级(实际的 document
)的 100%,然后将 body 的高度设置为其父级的 100% , html
。然后您的包装器将能够设置为文档高度的百分比。
关于html - 可扩展的 DIV 取决于视口(viewport),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12434266/