标题+粘滞页脚+内容div覆盖其余内容，如何集中内容？

Question

我正在使用此代码。 http://jsbin.com/ibecak/1/。我从这里拿到它：http://peterned.home.xs4all.nl/examples/csslayout1.html。这很好。

但是，我想要在容器div（黄色）中的页眉和页脚之间的空间中心内容div（洋红色）。

我会怎么做，而不会破坏任何东西？我试过设置显示器：table-cell和vertical-align：middle在#content上，但无济于事。

对我来说重要的是，当窗口太小而不是重叠所有内容时，页脚被压下，但我仍然希望能够将#content居中放在#container的剩余空间中。

如果可能的话，我想知道如何用CSS做到这一点。

谢谢。

Answer 1

这不是一件容易的事情。由于高度值在浏览器中有点有趣，如果它是宽度，那么就没有问题了。

您将需要使用不止3个div。

您将需要将您的内容div放入另一个div中，并使用jquery来计算页眉和页脚之间的空间高度。如果页眉和页脚是固定的高度，它会使得工作更容易。

一旦你计算出你的身高，那么你将需要绝对地将你的div放在容器div中，以便它位于空间的中间。

Answer 2

问题 - 我想在容器div（黄色）的页眉和页脚之间的空间中居中放置div（洋红色）。

尝试垂直居中内容div的困难不知道高度。如果它是一个固定的高度，那么你可以做到这一点。

例

div#content{ 
    height: 300px; 
    position: absolute; 
    top: 50%; 
    margin-top: -150px; 
    // Negative margin is half the height of content div 
    // To ensure it is in the middle 
} 

你可以计算出使用jQuery的高度，然后设置CSS样式。