CSS Div 100% 高度滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19757951/
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
Div 100% height scroll
提问by simon
At my page i have a navigation bar to the left that is 100% height and 25% width. It is working fine, but when there's scroll available, it destroys the background, and make it look ugly. The reason i think is that 100% height is only applied to the active window. What is the trick to have a div 100% height always, even if the user is scrolling?
在我的页面上，左侧有一个导航栏，高度为 100%，宽度为 25%。它工作正常，但是当有可用的滚动时，它会破坏背景，并使其看起来很难看。我认为的原因是 100% 高度仅适用于活动窗口。即使用户正在滚动，始终保持 div 100% 高度的技巧是什么？
Css of the navigation:
导航的CSS：
width:25%;
height:100%;
float:left;
color:#999999;
I have tried position:absolute with no results, also tried clear both. Need help :)
我试过 position:absolute 没有结果，也试过 clear 两者。需要帮忙 ：）
回答by Daniel Riemer
Using min-height: 100%instead of height: 100%should fix it. See updated fiddle here: http://jsfiddle.net/zitrusfrisch/Sa6cb/3/
使用min-height: 100%而不是height: 100%应该修复它。在此处查看更新的小提琴：http: //jsfiddle.net/zitrusfrisch/Sa6cb/3/
回答by Akan Udoeyop
I had a similar issue when I wanted to build an opaque overlay on top of a webpage. The overlay only covered the height of the browser window, not the total scrolling height of the page. I turned to Javascript to dynamically get the page height.
当我想在网页顶部构建一个不透明的叠加层时，我遇到了类似的问题。叠加层仅覆盖浏览器窗口的高度，而不是页面的总滚动高度。我转向 Javascript 来动态获取页面高度。
$('body').append('<div style="width:100%;height:'+document.documentElement.scrollHeight+'px;background:#000000;opacity:0.5;position: absolute;top: 0;z-index: 1000;"></div>')回答by Alex Quintero
if you want the element to take 100% of the screen use min-height: 100vhand if you want it to take 100% of the parent element use min-height: 100%
如果您希望该元素占用 100% 的屏幕使用权min-height: 100vh并且您希望它占用 100% 的父元素使用权min-height: 100%
