百分比高度HTML 5 / CSS [英] Percentage Height HTML 5/CSS
问题描述
我试图在CSS中设置一个< div> 到一定的百分比高度，但它只是保持与其内的内容相同的大小。当我删除HTML 5 <！DOCTYTPE html> 但是，它工作，< div> 整页的需要。我想让页面验证，那么我该怎么办？
I am trying to set a <div> to a certain percentage height in CSS, but it just remains the same size as the content inside it. When I remove the HTML 5 <!DOCTYTPE html> however, it works, the <div> taking up the whole page as desired. I want the page to validate, so what should I do?
我在< div> ，其ID为页：
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
推荐答案
我尝试在CSS中将div设置为某个百分比高度
I am trying to set a div to a certain percentage height in CSS
百分比是什么？
要设置百分比高度，其父元素（*）必须具有显式高度。这是相当不言而喻的，因为如果你保留height为 auto ，块将取其内容的高度...但如果内容本身有一个高度表示
To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height.
因此，div的父项必须是父项的父项，有一个显式的 height 属性。
So the parent of the div must have an explicit height property. Whilst that height can also be a percentage if you want, that just moves the problem up to the next level.
如果你想让div的高度成为一个百分比，那么这个高度也可以是一个百分比，如果你想要的话，视口高度，div的每个祖先包括< html> 和< body> code> height：100％，因此有一个明确的百分比高度链到div。
If you want to make the div height a percentage of the viewport height, every ancestor of the div, including <html> and <body>, have to have height: 100%, so there is a chain of explicit percentage heights down to the div.
，
或者，所有现代浏览器和IE> = 9支持相对于视口高度（ vh ）和视口宽度（ vw ）的新CSS单位：
Alternatively, all modern browsers and IE>=9 support new CSS units relative to viewport height (vh) and viewport width (vw):
div {
height:100vh;
}
查看更多信息。
这篇关于百分比高度HTML 5 / CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
