Html 附加到视口底部的 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1386947/
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 Attached to Bottom of Viewport
提问by greenkoi
I've read some of the other posts on how to get a DIV to attach to the bottom of the viewport - and I've implemented one solution with success, but I'm running into a bit of an issue.
我已经阅读了其他一些关于如何将 DIV 附加到视口底部的帖子 - 我已经成功实施了一个解决方案，但我遇到了一些问题。
At: http://s222894377.onlinehome.us/
在：http: //s222894377.onlinehome.us/
You can see there is an image stretched 100% in a DIV I created and attached. The DIV above it is set to height: 100%;
您可以看到在我创建并附加的 DIV 中有一个 100% 拉伸的图像。它上面的DIV设置为高度：100%；
But it's taking up a bit too much vertical space and I'm trying to compensate it's effect on the overall height.
但它占用了太多的垂直空间，我试图补偿它对整体高度的影响。
The structure is:
结构是：
I've tried variations on setting negative margins to the top and bottom margins and padding to compensate for the header height, but haven't figured it out yet.
我已经尝试将负边距设置为顶部和底部边距以及填充以补偿标题高度的变化，但还没有弄清楚。
If anyone has some suggestions - it would be much appreciated.
如果有人有一些建议 - 将不胜感激。
Thanks in advance,
提前致谢，
mm
毫米
回答by Amber
If you're trying to attach something to the bottom of the browser window and keep it there, perhaps you might be interested in the CSS position:attribute?
如果您尝试将某些内容附加到浏览器窗口的底部并将其保留在那里，也许您可能对 CSSposition:属性感兴趣？
http://www.w3schools.com/Css/css_positioning.asp
http://www.w3schools.com/Css/css_positioning.asp
Specifically, position: fixed;and then specify bottom: 0;to attach the bottom of something to the bottom of the browser.
具体来说，position: fixed;然后指定bottom: 0;将某些东西的底部附加到浏览器的底部。
回答by Matt Howell
I think you're going to run into problems if you try to specify a height on your upper div. It gets complicated and messy to do it this way.
我认为如果您尝试在上 div 上指定高度，您会遇到问题。这样做会变得复杂和混乱。
Try this:
尝试这个：
On your upper content div, don't set a height; but doset bottom-padding to 100px, or some over value that allows for the bottom div to display its full content without overlapping. This way, your main content will flow normally, and take up just as much space as it needs, but it won't be interfered with by the bottom div.
在上层内容 div 上，不要设置高度；但一定要将底部填充设置为 100 像素，或一些允许底部 div 显示其完整内容而不重叠的值。这样，您的主要内容将正常流动，并根据需要占用尽可能多的空间，但不会受到底部 div 的干扰。
回答by David says reinstate Monica
I'm not sure if I'm reading your problem correctly, but the only thing that comes to mind is to use something like:
我不确定我是否正确阅读了您的问题，但唯一想到的是使用以下内容：
div#content_block
{position: absolute;
top: 3em; /* basically this is 0 + vertical-height of the header; adjust to taste */
left: 0; /* assuming you want the div to stretch across the viewport */
right: 0;
bottom: 3em; /* 0 + vertical-height of footer */
overflow: auto;
}
But this feels horrible, and I can't help but think a better solution could be achieved with a clearer understanding of your problem.
但这感觉太可怕了，我不禁认为可以通过更清楚地了解您的问题来实现更好的解决方案。
Is there any chance you could post (or link to) an image that describes your intended layout? With relevant margins and off-sets added? Also, posting your code would be a good idea (css and html).
您是否有机会发布（或链接到）描述您预期布局的图像？添加了相关的边距和偏移量？此外，发布您的代码将是一个好主意（css 和 html）。
