使用液体/流体布局实现CSS粘性页脚的问题

发布于 2024-11-27 09:01:34 字数 3022 浏览 2 评论 0原文

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

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

所以问题是，如果我打开了 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;
}

原文

I am trying to implement the CSS Sticky Footer method as shown at cssstickyfooter.com. (I have also tried Ryan Fait's solution but to no avail).

I have followed everything to a t, or least I think I have. I have a container div (they call it wrap), a logo bar (they call it a header) and a page div (they call it main) then I have my footer.

So here is the problem, if I have the overflow:auto on then I get a really short div and a scroll bar (yucky). But if I comment it out all my content shows but the page still believes that the div is the same size as if the overflow:auto was not commented out.

It otherwise works just as it should. The footer stays at the bottom and when resizing, it stops at the short page/main div. Is there any way to get it to the bottom of my content? I should mention that I can't use fixed height for my page/main div because I need it to resize based on the size of the div's it contains (whichever one is visible at the time).

It may or may not be the footer causing the issue, either way I could use some help figuring this out.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

奈何桥上唱咆哮 2024-12-04 09:01:34

如何使用

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

css 作为

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

页脚粘在页面底部。

这就是您要找的吗？

How about using

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

and css as

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

The footer sticks to the bottom of the page.

Is this what you are looking for.

回复收藏 0 原文

月竹挽风 2024-12-04 09:01:34

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