-1

I am using this code. http://jsbin.com/ibecak/1/. I took it from here: http://peterned.home.xs4all.nl/examples/csslayout1.html. This works well.

However I want to center the content div (magenta) in the space between header and footer in the container div (yellow).

How would I go around doing that without breaking anything? I have tried setting display: table-cell and vertical-align: middle on #content, but to no avail.

The important thing for me is that the footer gets pushed down when the window is too small, instead of overlapping everything, but I still want to be able to center #content in the remaining space of #container.

If at all possible, I'd like to know how to do this with only CSS.

Thanks.

4

2 回答 2

0

问题 - 我想在容器 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 样式。

于 2013-04-11T12:22:01.297 回答
0

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

您需要使用的不仅仅是 3 个 div。

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

计算出身高后，您需要将 div 绝对定位在容器 div 内，使其位于空间的中间。

于 2013-04-11T10:52:11.900 回答