CSS 如何使 div 100% 高度固定？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25948464/
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
How can I make a div 100% height fixed?
提问by user4008903
I want to a div with 100% height but fixed position like right side of this website: http://www.dast2.com
我想要一个 100% 高度但固定位置的 div，如本网站右侧：http: //www.dast2.com
I know these are required: height:100%; position:fixed;
我知道这些是必需的：高度：100%；位置：固定；
but it doesn't work for me.
但这对我不起作用。
回答by Suchit kumar
try this:
尝试这个：
<body>
<div id="sidebar">
</div>
</body>
<style>
div#sidebar {
position: fixed;
background-color : #00FF00;
height: 100%;
width: 300px;
overflow: hidden;
}
</style>
回答by joergipoergi
Old but here it goes:
旧但在这里：
div#sidebar {
position: fixed;
top: 0px;
bottom: 0px
}
回答by Aras
.bg-container{
position: fixed;
width: 100%;
height: 100%;
}
回答by himanshu
html, body{height:100%;}
follow this and give 100% to the div
按照这个并给 div 100%
回答by Hasan Zahran
I think one of the container take max-width, check the all the container in youI think one of the container takes a property of max-width, check the container that holds the div.
我认为其中一个容器采用 max-width，检查您中的所有容器我认为其中一个容器采用 max-width 属性，检查包含 div 的容器。
回答by gdyrrahitis
Browsers dont calculate height so well.
height: automeans 'get the same height as your content'.
But height: 100%doesn't always plays well, because the content of an element defines its height. So the body height is defined by its content. So when you instruct your content to have height: 100%, you instruct it to have the same height as the body, but the body is the same height as the content, so you instruct it to be as tall as itself.
浏览器不能很好地计算高度。
height: auto意味着“获得与您的内容相同的高度”。但height: 100%并不总是很好，因为元素的内容定义了它的高度。因此，主体高度由其内容定义。因此，当您指示您的内容具有 时height: 100%，您指示它具有与主体相同的高度，但主体与内容的高度相同，因此您指示它与自身一样高。
You must provide height to body and html ( root element ).
您必须为 body 和 html（根元素）提供高度。
In this case, I made a demo, which I provided the html element a ridiculus height: 10000px.
在这种情况下，我做了一个演示，我为 html 元素提供了一个 ridiculus height: 10000px。
For the sidebar ( the one with the red color ) the only property you need is the min-height: 100%property. The sidebar will take all of its vertical space as you can see in the demo below. Just added position: fixed;and right:0to make it fixed at the right.
对于侧边栏（红色的那个），您需要的唯一属性就是该min-height: 100%属性。侧边栏将占据其所有垂直空间，如您在下面的演示中所见。刚刚添加position: fixed;并right:0使其固定在右侧。
Here is the demo
这是演示
Quick Note:If you ever want to have the same effect on live site, just inspect the page with the developer tools and grab the css/markup that fit your needs.
快速说明：如果您想在实时站点上获得相同的效果，只需使用开发人员工具检查页面并获取适合您需求的 css/标记即可。
Cheers!
干杯!
回答by Zeth
You need to have 'Display: block', for it to work.
您需要有“显示：阻止”才能工作。
THE HTML:
HTML：
<body>
<div class="container">
<div class="content">
<p>Top bit</p>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<p>Some content</p>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<p>Bottom bit</p>
</div>
<div class="fullHeight sidebar">
<h1>Sticky sidebar</h1>
</div>
</div>
</body>
THE CSS:
CSS：
.container {width: 1000px; margin: 0 auto; overflow: hidden; position: relative;}
.content {width: 690; float: left; position: relative;}
.fullHeight {height: 100%; display: block; overflow: hidden; position: fixed; width: 300px; background: red; right: 0; top: 0;}
I made the background red, so you could copy that code in, to see if it worked. I must admit, that I haven't tested it; but I'm fairly sure that that does the trick. Let me know if it doesn't work; then I'll test it and fix it.
我将背景设为红色，因此您可以复制该代码，看看它是否有效。我必须承认，我还没有测试过；但我很确定这能解决问题。如果它不起作用，请告诉我；然后我会测试它并修复它。
And remember to have 'Position: relative;' on the element that the fixed element inside - so it 'knows' what it should be fixed relative to. If it's not inside a container or anything (like mine is above), then you can put 'Position: relative;' on the body-tag; like so:
并记住有“位置：相对；” 在固定元素内部的元素上 - 所以它“知道”它应该相对于什么固定。如果它不在容器或任何东西内（就像我上面的那样），那么您可以输入“位置：相对；” 在身体标签上；像这样：
body {position: relative;}
