Html CSS：div 扩展到窗口高度，固定边距底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5766887/
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 expanding to window height, with margin-bottom fixed
提问by jonasll
I've been trying to do something extremely simple, yet I can't make it work!
我一直在尝试做一些非常简单的事情，但我无法让它工作！
Here's what I'm trying:
这是我正在尝试的：
---margin top: 15 px
---边距顶部：15像素
---VARIABLE HEIGHT DIV (imagine a box-like element)
---VARIABLE HEIGHT DIV（想象一个盒子状元素）
---margin bottom: 15px
---边距底部：15px
I basically want the box to resize based on the browser window height.
我基本上希望框根据浏览器窗口高度调整大小。
Here's what I've been trying:
这是我一直在尝试的：
CSS
CSS
body {
background-color: #D0CDC5;
height:100%
}
#info_box {
background-color: rgba(40,40,40,0.5);
border: rgba(34,34,34,0.9) 1px solid;
width: 350px;
height: 100%;
margin: 15px 0px 15px 20px;
}
#info_box p {
color: red;
}
HTML
HTML
<body>
<div id="info_box">
<p>Sample Content</p>
</div>
</body>
By the way, why is that the text appears 15px from the top of the div? Why isn't it flush?
顺便说一句，为什么文本出现在 div 顶部 15px 处？为什么不是冲的？
Thanks a lot guys,
非常感谢各位
**EDIT
**编辑
See this link, very good answer for all browser but IE6 and 7. another HTML/CSS layout challengeThanks to @Hristo!
请参阅此链接，对于除 IE6 和 7 之外的所有浏览器都是非常好的答案。另一个 HTML/CSS 布局挑战感谢 @Hristo！
采纳答案by Hristo
UPDATE
更新
Check out the fiddle...
看看小提琴...
Check out the fiddle... http://jsfiddle.net/UnsungHero97/uUEwg/1/
检查小提琴... http://jsfiddle.net/UnsungHero97/uUEwg/1/
I hope this helps.
Hristo
我希望这有帮助。
赫里斯托
回答by Jay
If you always use a consistent browser resolution, then it is doable. But if your screen size changes, depending on the device you use (tablet, mobile etc.), then this cannot be accomplished though CSS alone.
如果您始终使用一致的浏览器分辨率，那么它是可行的。但是，如果您的屏幕尺寸发生变化，这取决于您使用的设备（平板电脑、移动设备等），那么这无法仅通过 CSS 来实现。
I have done this dynamically using jQuery.
我已经使用 jQuery 动态完成了这项工作。
回答by Pekka
if you don't need to support IE6, and this is not part of a bigger layout, there is an easy way:
如果您不需要支持 IE6，并且这不是更大布局的一部分，那么有一个简单的方法：
#info_box {
position: fixed;
left: 0px;
top: 15px;
right: 0px;
bottom: 15px;
}
alternatively, you could make #info_boxstretch the full height, and put a position: absolutediv into it with the same data as above.
或者，您可以#info_box拉伸整个高度，并position: absolute使用与上述相同的数据将div 放入其中。
I'm not entirely sure whether there's a way to do this without absolute or fixed positioning, because no matter whether you use padding or margin, you'll always end up adding 30 pixels to what is already 100% of the height. I'm happy to be proven wrong though.
我不完全确定是否有办法在没有绝对或固定定位的情况下做到这一点，因为无论您使用填充还是边距，最终都会在已经 100% 的高度上增加 30 像素。我很高兴被证明是错误的。
回答by Maverick
Elements get their height based on the content inside them. So you already have an element that is centered and that will have margin top and bottom of 15px from the top and bottom of you site's body.
元素根据它们内部的内容获取它们的高度。所以你已经有一个居中的元素，它的顶部和底部距站点正文的顶部和底部有 15px 的边距。
But if you want an element that will always be centered middle of screen, filling all but 15px top and 15px bottom, it is not achievable with "conventional" means. It will either have to be an image or a re-sizable box that will have a scroll-bar if the content is bigger than screen size.
但是，如果您想要一个始终位于屏幕中间的元素，填充顶部 15px 和底部 15px 之外的所有元素，则无法通过“常规”方式实现。如果内容大于屏幕尺寸，它将必须是一个图像或一个可调整大小的框，该框将具有滚动条。
Anyways, if that is what you want, give it a fixed size and height, and use position:fixed.
无论如何，如果这是你想要的，给它一个固定的大小和高度，并使用 position:fixed。
