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

Question

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

但是我想将内容div（洋红色）置于容器div（黄色）中页眉和页脚之间的空格中。

如果不破坏任何东西，我该怎么做呢？我试过在#content上设置display：table-cell和vertical-align：middle，但是没有用。

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

如果可能的话，我想知道如何只使用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样式。