百分比高度 HTML 5/CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1622027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Percentage Height HTML 5/CSS
提问by D. Strout
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>在 CSS中将 a 设置为某个百分比的高度，但它只是与其中的内容保持相同的大小。<!DOCTYTPE html>然而，当我删除 HTML 5时，它可以工作，根据<div>需要占用整个页面。我想要页面验证，那我该怎么办？
I have this CSS on the <div>, which has an ID of page:
我在 上有这个 CSS <div>，它的 ID 为page：
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
回答by bobince
I am trying to set a div to a certain percentage height in CSS
我正在尝试在 CSS 中将 div 设置为某个百分比高度
Percentage of what?
什么百分比？
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.
要设置百分比高度，其父元素 (*) 必须具有明确的高度。这是相当不言而喻的，因为如果您将 height 保留为auto，则块将采用其内容的高度... Catch 22. 浏览器放弃，只使用内容高度。
So the parent of the div must have an explicit heightproperty. Whilst that height can also be a percentage if you want, that just moves the problem up to the next level.
因此 div 的父级必须具有显式height属性。如果您愿意，该高度也可以是百分比，但这只会将问题提升到一个新的水平。
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.
如果要使 div 高度成为视口高度的百分比，则 div 的每个祖先（包括<html>和<body>）都必须具有height: 100%，因此有一个明确的百分比高度链直到 div。
(*: or, if the div is positioned, the ‘containing block', which is the nearest ancestor to also be positioned.)
（*：或者，如果 div 已定位，则为“包含块”，它也是要定位的最近的祖先。）
Alternatively, all modern browsers and IE>=9 support new CSS units relative to viewport height (vh) and viewport width (vw):
或者，所有现代浏览器和 IE>=9 都支持相对于视口高度 ( vh) 和视口宽度 ( vw) 的新 CSS 单位：
div {
height:100vh;
}
See here for more info.
请参阅此处了解更多信息。
回答by Brian Campbell
You need to set the height on the <html>and <body>elements as well; otherwise, they will only be large enough to fit the content. For example:
您还需要在<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>回答by Olex Ponomarenko
bobince's answer will let you know in which cases "height: XX%;" will or won't work.
bobince 的回答会告诉您在哪些情况下“身高：XX%；” 会或不会工作。
If you want to create an element with a set ratio (height: % of it's own width), the best way to do that is by effectively setting the height using padding-bottom. Example for square:
如果要创建具有设定比例（高度：自身宽度的 %）的元素，最好的方法是使用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%;
}
The square container will just be made of padding, and the content will expand to fill the container. Long article from 2009 on this subject: http://alistapart.com/article/creating-intrinsic-ratios-for-video
方形容器将仅由填充组成，内容将扩展以填充容器。2009 年关于这个主题的长篇文章：http: //alistapart.com/article/creating-intrinsic-ratios-for-video
回答by Ahmad Aghazadeh
You can use 100vw / 100vh. CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.
您可以使用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>
回答by Md. A. Barik
Hi! In order to use percentage(%), you must define the % of it parent element. If you use body{height: 100%}it will not work because it parent have no percentage in height. In that case in order to work that body heightyou must add this in html{height:100%}
你好！为了使用百分比（％），您必须定义其父元素的百分比。如果您使用body{height: 100%}它将不起作用，因为它的父级没有高度百分比。在这种情况下，为了工作该身体高度，您必须在html{height:100%}
In other case to get rid of that defining parent percentage you can use
在其他情况下，要摆脱您可以使用的定义父百分比
body{height:100vh}
身体{高度：100vh}
vhstands for viewport height
vh代表视口高度
I think it help
我认为它有帮助
回答by Jahmic
Sometimes, you may want to conditionally set the height of a div, such as when the entire content is less than the height of the screen. Setting all parent elements to 100% will cut off content when it is longer than the screen size.
有时，您可能希望有条件地设置 div 的高度，例如当整个内容小于屏幕高度时。将所有父元素设置为 100% 会在内容超过屏幕尺寸时切断内容。
So, the way to get around this is to set the min-height:
所以，解决这个问题的方法是设置最小高度：
Continue to let the parent elements automatically adjust their height Then in your main div, subtract the pixel sizes of the header and footer div from 100vh (viewport units). In css, something like:
继续让父元素自动调整它们的高度然后在你的主 div 中，从 100vh（视口单位）中减去页眉和页脚 div 的像素大小。在 css 中，类似于：
min-height: calc(100vh - 246px);
最小高度：计算（100vh - 246px）；
100vh is full length of the screen, minus the surrounding divs. By setting min-height and not height, content longer than screen will continue to flow, instead of getting cut off.
100vh 是屏幕的全长，减去周围的 div。通过设置 min-height 而不是高度，比屏幕长的内容将继续流动，而不是被切断。
