Question

我正在使用http://www.cssstickyfooter.com/作为流畅的页眉/页脚/内容页面。

我正在尝试为我的网站进行两列布局。左div导航;正确的div内容。左列的内容在中心垂直对齐。内容在中心垂直对齐，在中心水平对齐。

我一直在布局导航。

我认为我应该可以为导航容器制作一个div {float：left; width：300px; display：table;}然后使nav_content div像{height：300px;显示：表细胞;垂直对齐：中部;}

我首先想到的问题是，容器需要跨越页脚后剩余的100％高度，然后内容才能垂直对齐高度。（我唯一能找到的就是'背景黑客'来实现这个目标，并且Jscript可以计算并动态更新绝对高度。对我而言，这些是唯一的选择。但是当我将父div设置为设置高度，然后尝试垂直对齐内容，它仍然无法正常工作。我真的不明白，因为我读过的所有资源都表明父级包含表格显示，而table-cell可以使用vertical-align中间。（用漂浮物搞砸了吗？）

这是我想要完成的粗略绘制的布局。 http://i.imgur.com/VefhxU7.png

这是代码的想法。

<div id="wrap">
    <div id="header">
    </div>
    <div id="main">
        <div id="container">
            <div id="content">
            </div>
        </div>
        <div id="side">
            <div id="nav">
            </div>          
        </div>
    </div>
</div>
<div id="footer">
</div>



#side
{
    background: none repeat scroll 0 0 #B5E3FF;
    float: left;
    position: relative;
    width: 250px;
    display:table;
}

#nav
{
    display:inline-block;
    vertical-align:middle;
    height: 350px;
    width:200px;
    background-color: blue;
}

我做错了什么？感谢任何试图提供帮助的人。：）

Answer 1

试试这个：

<style>
#footer {
    background-color: #999;
}
#header {
    background-color: #0C6;
}
#side
{
    background: none repeat scroll 0 0 #B5E3FF;
    float: right;
    position: relative;
    width: 70%;
    display:table;
    height: 350px;
}

#nav
{
    display:inline-block;
    vertical-align:middle;
    height: 350px;
    width:30%;
    background-color: blue;
    float: left;
}
</style>

<body>
<div id="mainContainer">
    <div id="header">This is header</div>
    <div id="nav">This is Nav</div>
    <div id="side">This is side</div>   
    <div id="footer">This is footer</div>
</div>
</body>

表。垂直对齐。与stickyfooter和标题的列上

1 个答案: