个人中心
gpt4 book ai didi

html - table 。垂直对齐。在带有粘性页脚和页眉的列上

转载 作者：行者123 更新时间：2023-11-28 11:57:52 25 4
gpt4 key购买 nike

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

我正在尝试为我的网站做一个两栏布局。左 div 导航；正确的 div 内容。左列的内容在中心垂直对齐。内容垂直居中对齐，水平居中对齐。

我一直在布置导航。

我认为我应该能够为导航容器制作一个 div {float:left; width:300px;display:table;} 然后使 nav_content div 类似于 {height:300px;显示:表格单元格；垂直对齐:中间；}。

一开始我认为问题是容器需要跨越页脚之后剩余部分的 100% 高度，然后内容才能垂直对齐高度。 (我唯一能找到的是'background-hacks'来实现这个和Jscript来计算和动态更新绝对高度。在我看来，这些是唯一的选择。)但是当我将父div设置为设置高度，然后尝试垂直对齐内容，它仍然不起作用。我真的不明白，因为我读过的所有资源都指出父级包含表格显示并且表格单元格可以使用垂直对齐中间。 (使用 float 会把事情搞砸吗？)

这是我试图完成的粗略布局。 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;
}

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

最佳答案

试试这个:

<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>

关于html - table 。垂直对齐。在带有粘性页脚和页眉的列上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20023253/

25 4 0
文章推荐： javascript - HTML5 Canvas 无方法 'toDataURL'
文章推荐： jQuery 悬停效果 - 需要帮助改进此代码
文章推荐： javascript - 如何传递和接收 $(this) 作为参数？
文章推荐： swift - 快速删除 Unicode U+2018 左单引号，如“Ali to Ali”