CSS 设置高度 100% 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6879110/
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
setting height 100% not working
提问by katie
For some reason the container's boundaries won't go all the way to the bottom despite making its height 100%. Here is my code, the container is under another div center.
出于某种原因，尽管容器的高度为 100%，但容器的边界不会一直到底部。这是我的代码，容器在另一个 div 中心下。
Html
html
<div id="center">
<div class="container" >
</div>
</div>
css
css
#center {
float:left;
width:20%;
margin-top:10px;
height:100%;
}
.container {
margin-top:3px;
height:100%;
border:2px solid #dedede;
width:600px;
}
回答by Sparky
You'll have to include something like this in your CSS...
你必须在你的 CSS 中包含这样的东西......
body, html{
height: 98%;
padding: 0;
}
Play around with the height to eliminate the vertical scroll-bars caused by margins and borders on the elements contained within.
调整高度以消除由其中包含的元素的边距和边框引起的垂直滚动条。
EDIT:
编辑：
Otherwise, make it 100% and reduce the height of the main element inside to eliminate vertical scroll-bars.
否则，将其设为 100% 并降低内部主要元素的高度以消除垂直滚动条。
body, html {
height: 100%;
padding: 0;
}
#center {
float:left;
width:20%;
margin-top:10px;
height:90%;
}
.container {
margin-top:3px;
height:100%;
border:2px solid #dedede;
width:600px;
}
回答by n8wrl
Your id='center' div needs to be inside something with height.
你的 id='center' div 需要在有高度的东西里面。
This helps me - whenever I set a style to width or height=100% I ask myself, "100% of WHAT?" that prompts me to make sure whatever the element is inside of is also styled properly for width and height.
这对我有帮助 - 每当我将样式设置为宽度或高度 = 100% 时，我都会问自己，“什么的 100%？” 这提示我确保元素内部的任何内容也为宽度和高度设置了正确的样式。
Also, put different colored borders around things to see where and how big they really are. It can screw up dimensions but it gives you a good idea of what is really going on.
此外，在事物周围放置不同颜色的边框，以查看它们的实际位置和大小。它可以搞砸尺寸，但它可以让您很好地了解实际情况。
回答by Sinan
For a working 100% height property you need to have the parent div's height set.
对于有效的 100% 高度属性，您需要设置父 div 的高度。
In your case the element which is the parent of #centershould have some height for your css to work as expected.
在您的情况下，作为其父元素的元素#center应该具有一定的高度，以便您的 css 按预期工作。
回答by Jonathan Henson
Usually, a div is only as high as its content regardless of the height you specify. You need to nest them. To avoid complication, I set a max-height and use absolute positioning for the elements I want to be at the bottom of the container.
通常，无论您指定的高度如何，div 的高度都与其内容一样高。你需要嵌套它们。为了避免复杂化，我设置了一个最大高度并对我想要位于容器底部的元素使用绝对定位。
As a design approach, you need to make sure the content of the div is the height you want. Padding can be a very useful tool. You can put ridiculous padding in and hide the overflow. Then it will cap off at your max-height.
作为一种设计方法，您需要确保 div 的内容是您想要的高度。填充可以是一个非常有用的工具。您可以放入可笑的填充并隐藏溢出。然后它将在您的最大高度处关闭。
