Question

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

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

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

导航栏：无论滚动如何，都会固定在屏幕顶部 幻灯片框：设置为绝对值，最大值为80px（导航栏高度+ 16px） 内容框：这是页面的大部分内容。它包含了页面的所有内容（因此对于“关于我”，它有关于此人的详细信息）。它被设置为绝对值，它被赋予最高值336px（导航栏的高度+ 16px +幻灯片盒的高度+ 16px）的页脚

问题是，如果我有内容框的高度，整个情况就会解决，因为我可以做到以下几点。

顶部：336px +内容高度+ 16px;

但是，我无法解决这个问题，因为内容框的高度很灵活，具体取决于网页。它的范围可以从160px一直到1200px或更高。

任何人都可以解决如何解决我的问题吗？我把代码放在下面，这样你就可以看到我做了什么。

我感谢所有的帮助！（而且你知道，我对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');
}

Answer 1

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

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

的CSS

#footer {
   position : absolute;
   bottom:0;
   width:100%;
   background-color:red;
   text-align:center;
}

CSS Footer Hassle - 保持低调

1 个答案: