2

我正在尝试实现 CSS Sticky Footer 方法，如cssstickyfooter.com所示。（我也尝试过Ryan Fait 的解决方案，但无济于事）。

我已经遵循了一切，或者至少我认为我已经遵循了。我有一个容器div（他们称之为 wrap）、一个徽标栏（他们称之为页眉）和一个页面div（他们称之为 main）然后我有我的页脚。

所以这就是问题所在，如果我打开了overflow:auto，那么我会得到一个非常短div的滚动条（恶心）。但是，如果我注释掉我所有的内容显示，但页面仍然认为它的大小与未注释掉div的大小相同。overflow:auto

否则它会正常工作。页脚停留在底部，调整大小时，它停在短 page/main 处div。有没有办法让它深入到我的内容的底部？我应该提到我不能为我的页面/主页面使用固定高度，div因为我需要它根据div它包含的 's 的大小来调整大小（以当时可见的那个为准）。

它可能是也可能不是导致问题的页脚，无论哪种方式我都可以使用一些帮助来解决这个问题。

HTML：

<body>
<div id="container">
    <div id="logo"> 

        <div id="home-flower"></div><!-- end home-flower -->
        <div id="about-flower"></div><!-- end about-flower -->
        <div id="proof-flower"></div><!-- end proof-flower -->
        <div id="contact-flower" ></div><!-- end other-flower --> 
    </div><!-- end logo-->
    <div id="page">
        <div id="spacer"><br/></div><!-- end spacer -->
        <div id="home">home</div><!-- end home -->
        <div id="about">about</div><!-- end about -->
        <div id="proof">proof of concept</div><!-- end proof -->
        <div id="contact">contact</div><!-- end contact --> 
    </div><!-- end page -->
</div><!--end container-->
<div id="footer"> </div><!-- end footer -->
</body>

CSS：

* {
    margin:0px auto !important;
}

html, body {
    height:100%;    
}

#container {
    width:800px;
    background-color:#F0F;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

#page{
    width:100%;
    min-height:100%;
    position:relative;
    background-color:#F00;
    padding-bottom:75px;
    /*overflow:auto;*/
}

#logo{
    position:relative;
    width:100%;
    height:210px;
    top:0px;
    left:0px;
    background:url(images/logo.png);
}

#home{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    visibility:visible;
}

#about{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#proof{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#contact{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#footer {
    position:relative;
    margin-top:-75px;
    width:800px;
    height:75px;
    background-color:#C0F;
    clear:both;
}

#spacer {
    position:relative;
    line-height:20px;
}
4

2 回答 2

0

怎么用

<div id="footer">
  This is footer text
</div><!-- end footer -->

和CSS作为

#footer{ position:fixed; bottom:0px; }

页脚粘在页面底部。

这是你想要的。

于 2011-08-02T11:23:54.393 回答
0

看起来我需要将 、 、 和 div 的位置更改#home为#about相对#proof而#contact不是绝对，就像我拥有它们一样。但是，一旦我这样做，它们就不再堆叠在一起了。关于如何使相对定位的 div 具有相同的 (x,y) 位置以使它们彼此重叠的任何想法？我为每个 div设置了topand ，但它们只是将自己分层而不是堆叠......如果这有任何意义的话。left0px

于 2011-08-03T00:53:52.177 回答