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中的height元素。所以首先我想如果它甚至是可能的（我猜它是第二个）那当然是怎么回事？

编辑：非常像这一面，顶部栏应始终位于顶部，一个是相当直接的。

然后#login_wrapper应始终在具有固定高度的站点中居中。

最后页脚应该始终位于底部（它应该被推不粘），因为在这种情况下#login_wrapper不会填写网站。

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

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

从该网站找到解决方案[链接] http://stackoverflow.com/questions/7909587/horizontal-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 */
}

CSS，Top，Bottom Div以及居中的水平Div

1 个答案: