水平，并与页眉和页脚页面中间的垂直中心格坚持到顶部和页面底部 [英] Horizontally and vertically center div in the middle of page with header and footer stuck to top and bottom of page

问题描述

我试图做一个网页，我有一个固定高度的页眉和页脚。头是在屏幕（100％的宽度）的顶部和页脚是在底部（100％宽度）。我想中心，在页眉和页脚之间的空间高度可变内容的股利。在下面的jsfiddle，它的工作原理，如果含量比该空间更短，但如果其含量变得太长，这是不言而喻过去页脚，并在标头。它也不会在IE（惊奇，惊奇），在所有的工作。

例： http://jsfiddle.net/VrfAU/4/

编辑：我做了一些照片，试图使这更清楚

小含量

大型内容

解决方案

我结束了重新开始，并尝试不同的方法

。工作溶液中低于新的jsfiddle找到。其想法是页眉和页脚从内容区域分开，以便它们会坐在顶部和底部。然后，它变得更容易集中的内容区域在这些之间的空间（有一些黑客对旧版本的IE浏览器）。

http://jsfiddle.net/UYpnC/5/

I'm trying to make a page where I have a fixed height header and footer. The header is at the top of the screen (100% width) and the footer is at the bottom (100% width). I want to center a div with variable height content in the space between the header and footer. In the below jsfiddle, it works if the content is shorter than the space, but if the content gets too long, it goes past the footer, and over the header. It also doesn't work at all in IE (surprise, surprise).

Example: http://jsfiddle.net/VrfAU/4/

Edit: I've made some images to try and make this more clear.

Small content

Large Content

解决方案

I ended up starting over and trying a different approach. The working solution is found in the new jsfiddle below. The idea was to separate the header and footer from the content area so that they would sit on top and bottom. Then it became much easier to center the content area in the space between those (with some hacks for older versions of IE).

http://jsfiddle.net/UYpnC/5/

这篇关于水平，并与页眉和页脚页面中间的垂直中心格坚持到顶部和页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！