百分比高度HTML 5 / CSS
百分比高度HTML 5 / CSS
我试图<div>在CSS中设置一个特定的百分比高度，但它只是保持与其中的内容相同的大小。<!DOCTYTPE html>但是，当我删除HTML 5 时，它可以工作，根据<div>需要占用整个页面。我希望页面验证，所以我该怎么办？
我有这个CSS <div>，其ID为page：
#page {
padding: 10px;
background-color: white;
height: 90% !important;}
12345678_0001浏览 760回答 4
4回答
-
大话西游666
我试图在CSS中将div设置为某个百分比高度什么的百分比？要设置百分比高度，其父元素（*）必须具有显式高度。这是相当不言而喻的，因为如果你将高度保持为高度auto，则该块将采用其内容的高度...但是如果内容本身具有以父母的百分比表示的高度，那么您自己做了一点Catch 22.浏览器放弃并仅使用内容高度。因此div的父级必须具有显式height属性。虽然如果你想要的话，这个高度也可以是一个百分比，这只会将问题提升到一个新的水平。如果你想让div高度占视口高度的百分比，div的每个祖先，包括<html>和<body>必须有height: 100%，所以有一个明确的百分比高度链到div。（*：或者，如果div被定位，'包含块'，也是最近的祖先也被定位。）或者，所有现代浏览器和IE> = 9都支持相对于视口高度（vh）和视口宽度（vw）的新CSS单位：div { height:100vh; }在这里看到更多的信息。 -
牛魔王的故事
你可以用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>
随时随地看视频慕课网APP
JavaScript
Html/CSS