猿问

百分比高度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
浏览 810回答 4
4回答

大话西游666

我试图在CSS中将div设置为某个百分比高度什么的百分比？要设置百分比高度，其父元素（*）必须具有显式高度。这是相当不言而喻的，因为如果你将高度保持为高度auto，则该块将采用其内容的高度...但是如果内容本身具有以父母的百分比表示的高度，那么您自己做了一点Catch 22.浏览器放弃并仅使用内容高度。因此div的父级必须具有显式height属性。虽然如果你想要的话，这个高度也可以是一个百分比，这只会将问题提升到一个新的水平。如果你想让div高度占视口高度的百分比，div的每个祖先，包括<html>和<body>必须有height: 100%，所以有一个明确的百分比高度链到div。（*：或者，如果div被定位，'包含块'，也是最近的祖先也被定位。）或者，所有现代浏览器和IE> = 9都支持相对于视口高度（vh）和视口宽度（vw）的新CSS单位：div&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;height:100vh;&nbsp;}在这里看到更多的信息。
0

牛魔王的故事

你可以用100vw / 100vh。CSS3为我们提供了视口相对单元。100vw表示100％的视口宽度。100vh;&nbsp;100％的高度。&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="display:flex;&nbsp;justify-content:&nbsp;space-between;background-color:&nbsp;lightyellow;&nbsp;width:100%;&nbsp;height:85vh"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="width:70%;&nbsp;height:&nbsp;100%;&nbsp;border:&nbsp;2px&nbsp;dashed&nbsp;red"></div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="width:30%;&nbsp;height:&nbsp;100%;&nbsp;border:&nbsp;2px&nbsp;dashed&nbsp;red"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div>
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

JavaScript
Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答