百分比高度HTML 5 / CSS我试图<div>在CSS中设置一个特定的百分比高度，但它只是保持与其中的内容相同的大小。<!DOCTYTPE html>但是，当我删除HTML 5 时，它可以工作，根据<div>需要占用整个页面。我希望页面验证，所以我该怎么办？我有这个CSS <div>，其ID为page：#page {
padding: 10px;
background-color: white;
height: 90% !important;}
4 回答
大话西游666
TA贡献1817条经验 获得超14个赞
我试图在CSS中将div设置为某个百分比高度
什么的百分比？
要设置百分比高度，其父元素（*）必须具有显式高度。这是相当不言而喻的，因为如果你将高度保持为高度auto，则该块将采用其内容的高度...但是如果内容本身具有以父母的百分比表示的高度，那么您自己做了一点Catch 22.浏览器放弃并仅使用内容高度。
因此div的父级必须具有显式height属性。虽然如果你想要的话，这个高度也可以是一个百分比，这只会将问题提升到一个新的水平。
如果你想让div高度占视口高度的百分比，div的每个祖先，包括<html>和<body>必须有height: 100%，所以有一个明确的百分比高度链到div。
（*：或者，如果div被定位，'包含块'，也是最近的祖先也被定位。）
或者，所有现代浏览器和IE> = 9都支持相对于视口高度（vh）和视口宽度（vw）的新CSS单位：
div {
height:100vh; }在这里看到更多的信息。
牛魔王的故事
TA贡献1830条经验 获得超3个赞
你可以用100vw / 100vh。CSS3为我们提供了视口相对单元。100vw表示100％的视口宽度。100vh; 100％的高度。
<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh"> <div style="width:70%; height: 100%; border: 2px dashed red"></div> <div style="width:30%; height: 100%; border: 2px dashed red"></div> </div>
添加回答
举报
0/150
提交
取消