百分比高度HTML 5 / CSS
我试图在CSS中设置一个<div>到一定的百分比高度，但它只是保持与其中的内容相同的大小。 但是，当我删除HTML 5 <!DOCTYTPE html>时， <div>占用了整个页面。 我想要页面validation，那么我该怎么办？
我有这个CSS的<div> ，它有一个page的ID：
#page { padding: 10px; background-color: white; height: 90% !important; }
我想设置一个div在CSS中的一定比例的高度
什么比例？
要设置百分比高度，其父元素（*）必须具有明确的高度。 这是相当不言而喻的，因为如果将高度保持为auto ，块将会占用其内容的高度…但是如果内容本身具有用父母的百分比表示的高度，小捕捉22.浏览器放弃，只是使用内容的高度。
所以div的父母必须有一个明确的height属性。 虽然这个高度也可以是一个百分比，如果你想，这只是把问题上升到一个新的水平。
如果要将div高度设置为视口高度的百分比，则div的每个祖先（包括<html>和<body> ）都必须具有height: 100% ，因此显式百分比高度链DIV。
（*：或者，如果div被定位，那么“包含块”也是最近的祖先也被定位）。
或者，所有现代浏览器和IE> = 9都支持相对于视口高度（ vh ）和视口宽度（ vw ）的新CSS单位：
div { height:100vh; }
在这里看到更多的信息 。
您还需要在<html>和<body>元素上设置高度; 否则，他们只会大到适合内容。 例如 ：
<!DOCTYPE html> <title>Example of 100% width and height</title> <style> html, body { height: 100%; margin: 0; } div { height: 100%; width: 100%; background: red; } </style> <div></div>
bobince的回答会让你知道在哪种情况下“身高：XX％” 将或不会工作。
如果要创build一个具有设定比例（高度：自己宽度的百分比）的元素，最好的方法是使用padding-bottom有效地设置高度。 广场示例：
<div class="square-container"> <div class="square-content"> <!-- put your content in here --> </div> </div> .square-container { /* any display: block; element */ position: relative; height: 0; padding-bottom: 100%; /* of parent width */ } .square-content { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }
方形容器只是由填料制成，内容物将会扩大以填充容器。 来自2009年的长篇文章： http : //alistapart.com/article/creating-intrinsic-ratios-for-video
你可以使用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>
