当前位置: 动力学知识库 > 问答 > 编程问答 >

CSS: Fluid layout - footer always at the bottom, and a fluid center

问题描述:

How would you do this:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Except with a fluid center (vertically stretched, height 100%)?

网友答案:

I would use a display:table; layout for the body or a wrapper, and giving the middle row a hundred percent height.

Like this.-

<body>
<div>
    <div id=head">head</div>
</div>
<div>
    <div id=body">body</div>
</div>
<div id=head">
    <div id="foot">foot</div>
</div>
</body>

With the following CSS.

html, body
{
    height:100%;
}
body
{
    width:100%;
    display:table;
}
body > div
{
    display:table-row;
}
body > div > div
{
    display:table-cell;
}
#body
{
    height:100%;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: