3

我一直在开发一个新网站，这次使用 CSS 让它看起来更好。到目前为止，它已经成功了吗？但是我现在卡住了。我已经为页面底部（绝对底部，而不是固定底部）建立了一个页脚，但我无法让它保持向下。我在网上查看了许多解决方案，但我找不到解决问题的解决方案。

我的页脚有 100% 的固定宽度和 176px 的高度，所以剩下的就是强制它留在页面底部。

在我的网页上，内容按以下顺序完成。

导航栏：固定在屏幕顶部，与滚动无关 幻灯片框：设置为绝对值，顶部值为 80 像素（导航栏的高度 + 16 像素） 内容框：这是这页纸。它包含页面的所有内容（所以对于关于我，它详细说明了这个人）。它设置为绝对值，并给出 336 像素的顶部值（导航栏的高度 + 16 像素 + 幻灯片框的高度 + 16 像素 ）

问题是，如果我有 Content Box 的高度，这整个情况就会得到解决，因为我可以做以下事情。

顶部：336px + 内容框高度 + 16px；

但是，我无法解决，因为内容框的高度取决于网页是灵活的。它的范围可以从 160 像素一直到 1200 像素或更高。

谁能解决我的问题？我把代码放在下面，这样你就可以看到我做了什么。

我感谢所有帮助！（你知道，我对 CSS 完全陌生。到目前为止，感谢在线教程）

#navigation-box 
{
    position: fixed;
    top: 0;
    width: 100%;
    color: #ffffff;
    min-height: 64px;
    max-height: 64px;
    text-align: center;
    padding: 0px;
    background-image:url('Website-Graphics/Navigation_Background.png');

    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;

    /* background-color: rgba(157, 157, 157, 1); */
    /* color: rgba(1, 1, 1, 1); */
}

#navigation-box a 
{
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    text-decoration: none;
}

#navigation-box a:hover 
{
    color: grey;
}

#slideshow-box
{
    position: absolute;
    width: 60%;
    min-height: 240px;
    max-height: 240px;
    left: 20%;
    top: 80px;
    text-align: left;
    padding: 0px;   
    background-color: rgba(157, 157, 157, 1);;

    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
}

#content-box
{
    position: absolute;
    width: 60%;
    min-height: 160px;
    left: 20%;
    top: 336px;
    text-align: left;
    padding: 0px;
    background-color: #ffffff;

    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
}

#footer-box 
{
    position: absolute;
    min-width: 100%;
    max-width: 100%;
    min-height: 176px;
    max-height: 176px;
    left: 0;
    top: 0;
    color: #ffffff;
    border: 5px solid black;
    padding: 3px;

    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;

    background-color: rgba(1, 1, 1, 0.8);
    color: rgba(255, 255, 255, 0.8);
}

body 
{
    padding: 0;
    margin: 0;
    background-image:url('Website-Graphics/Main_Background.png');
}
4

1 回答 1

2

无论窗口高度如何，这都应将页脚保持在底部

<div id="footer">myfooter</div>

CSS

#footer {
   position : absolute;
   bottom:0;
   width:100%;
   background-color:red;
   text-align:center;
}
于 2013-07-21T11:14:33.253 回答