Question

如果您转到http://ffmages.com/final-fantasy-tactics（作为示例），您会注意到页脚部分显示在导航和内容区域后面。我想这样做，导航和内容在100％高度拉伸，页脚停留在屏幕的底部。

以下是我用于标题，菜单，内容和页脚部分的CSS：

#container {
    width: 1000px;
    height: 100%;
    background-image: url(/images/background.gif); 
    margin: 0 auto;
}

#header {
    width: 1000px; 
    height: 98px;
    background-image: url(/images/header.jpg);
    background-repeat: no-repeat;
}

#primary {
    float: left; 
    width: 167px;
    height: 798px;
    text-align: left;
    padding-bottom: 14px;
    background-image: url(/images/nav-bg.jpg); 
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    margin: 0px;
    border-top: 1px #000000 solid;
    border-left: 1px #000000 solid;
    border-right: 1px #000000 solid;
}

#content {
    float: right;
    width: 810px; 
    height: 100%;
    text-align: left;
    background-color: #FFFFFF; 
    border-top: 1px #000000 solid; 
    border-right: 1px #000000 solid; 
    padding: 10px;
    line-height: 1.5em; 
    margin: 0px;
}

#footer {
    clear: both;
    width: 998px;
    height: 18px;
    font-size: 7pt;
    color: #FFFFFF;
    text-align: center;
    background-color: #07162A;
    background-image: url(/images/footer-bg.jpg);
    border-top: 1px #000000 solid;
    border-left: 1px #000000 solid;
    border-right: 1px #000000 solid;
    border-bottom: 1px #000000 solid;
    padding-top: 6px;
    padding-bottom: 1px;
}

感谢任何帮助。谢谢！

Answer 1

很难说没有看到div层次结构。

这里只是spitballing，但你可以设置div结构。

---------------------------------------------
|                  HEADER                   |
---------------------------------------------
|      |                                    |
|      |                                    |
|      |                                    |
| NAV  |           BODY                     |
|      |                                    |
|      |                                    |
|      |                                    |
---------------------------------------------
|                  FOOTER                   |
---------------------------------------------

其中NAV实际上包含在BODY中。当BODY或NAV垂直扩展时，将相应地推动FOOTER。你必须使用边距和填充来使页脚与浏览器窗口的底部齐平。

Answer 2

所有你应该做的（根据给出的例子，将两个属性应用于你的CSS

position: fixed;
bottom: 0;

一旦应用了这两个页脚，您的页脚应该始终位于页面的底部，无论你设置的是多宽......在你的情况下998px

如何在CSS中将导航和内容区域高度拉伸到100％？

2 个答案: