水平和垂直居中在页面中间的div，页眉和页脚粘在页面的顶部和底部 [英] Horizontally and vertically center div in the middle of page with header and footer stuck to top and bottom of page

问题描述

我试图做一个页面，我有一个固定的高度页眉和页脚。标题位于屏幕顶部（100％宽度），页脚位于底部（100％宽度）。我想要一个div与可变高度内容在页眉和页脚之间的空间。在下面的jsfiddle中，如果内容比空间短，但如果内容太长，它会通过页脚，并通过标题。它在IE中根本不起作用（惊喜，惊喜）。

示例：

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/

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