Question

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

我已经完成了所有事情，或者至少我认为我有。我有一个容器div（他们称之为包装），一个徽标栏（他们称之为标题）和一个页面div（他们称之为主页）然后我有我的页脚。

所以这就是问题，如果我有overflow:auto，那么我会得到一个非常简短的div和一个滚动条（令人讨厌）。但是，如果我将所有内容都显示出来，但页面仍然认为div的大小与overflow:auto未被注释掉的大小相同。

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

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

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;
}

Answer 1

如何使用

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

和css为

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

页脚粘在页面底部。

这就是你要找的东西。

Answer 2

看起来我需要将#home，#about，#proof和#contact div的位置更改为相对而不是绝对，就像我拥有它们一样。但是，一旦我这样做，他们就不再堆叠在一起了。关于如何制作相对定位的div的任何想法都有相同的（x，y）位置，以便它们在彼此之上？对于每个div，我将top和left设置为0px，但它们只是分层而不是堆叠...如果这有任何意义。

实现具有液体/流体布局的css粘性页脚的问题

2 个答案: