CSS div 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14628838/
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
CSS div 100% height
提问by T1T
I'm developing this websiteand I want the right sidebar to have 100% height.
我正在开发这个网站，我希望右侧边栏的高度为 100%。
body {
height: 100%;
min-height: 100%;
position: relative;
}
mydiv {
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 290px;
}
I've read a lot of answer, especially this (Prestaul answer): Setting 100% height on an absolutely positioned element when the content expands past the window size.
我已经阅读了很多答案，尤其是这个（Prestaul 答案）： 当内容扩展超过窗口大小时，在绝对定位的元素上设置 100% 高度。
But for me this trick does not work, also the fiddle exemple doesn't work!
但是对我来说，这个技巧不起作用，小提琴示例也不起作用！
This is the jsfiddle working example.
采纳答案by J Max
try setting the body style to:
尝试将 body 样式设置为：
body { position:relative;}
it worked for me
它对我有用
回答by MildlySerious
Set the html tag, too. This way no weird position hacks are required.
也设置 html 标签。这样就不需要奇怪的位置技巧了。
html, body {height: 100%}
html, body {height: 100%}
回答by Reggie Pinkham
Flexbox solution
弹性盒解决方案
Note:Add flex vendor prefixes if required by your supported browsers.
注意：如果您支持的浏览器需要，请添加 flex 供应商前缀。
html {
height: 100%;
}
body {
height: 100%;
display: flex;
}
.Content {
flex-grow: 1;
}
.Sidebar {
width: 290px;
flex-shrink: 0;
}<div class="Content" style="background:#bed">Content</div>
<div class="Sidebar" style="background:#8cc">Sidebar</div>回答by Lars Ljungvist
I have another suggestion. When you want myDiv to have a height of 100%, use these extra 3 attributes on your div:
我还有一个建议。当您希望 myDiv 具有 100% 的高度时，请在您的 div 上使用这些额外的 3 个属性：
myDiv {
min-height: 100%;
overflow-y: hidden;
position: relative;
}
That should do the job!
那应该做的工作！
