html - CSS、Top、Bottom Div 以及居中的水平 Div

Question

<div id="site_wrapper">
<div id="top"><?=$top?></div>
<div id="wrapper">
<div id="login_wrapper">
<?=$content?>
</div>
</div>
<div id="footer"><?=$footer?></div>
</div>

在哪里

$top should be drawn on the very top of the page.  
$content should be centered both vertically and horizontally of the page.  
$footer should be drawn on the very bottom of the page.

我不希望任何一个 div 跟随视图，我一个一个地找到了解决问题的两个解决方案，但没有一个可以将它们组合起来，因为它们在 css 中都有高度元素。所以首先我猜它是否可能（我猜是）其次当然是，如何？

编辑：很像这一边，顶部栏应该总是在顶部，那是相当直截了当的。

那么#login_wrapper 应该始终以固定高度居中。

最后，页脚应该总是在底部（它应该被推送而不是粘贴），因为在这种情况下#login_wrapper 不会填写网站。

#top 和#footer 也都有固定的高度。

Edit2：修复了一些问题的说明。

从这个站点找到解决方案 [链接]http://stackoverflow.com/questions/7909587/horizo ​​ntal-and-vertical-centering-above-a-sticky-footer-in-
css 无论如何谢谢！

Answer 1

如果我理解您的问题，请尝试使用此 CSS

#site_wrapper
{
position: relative;
}

#top
{
position: relative;
top: 0px;
}

#footer
{
position: relative;
bottom: 0px;
}

#wrapper
{
position:relative;
vertical-align: middle;
height: 100%;
}

#login_wrapper
{
/* add some height */
}