【问题标题】:Footer stick to bottom, Extends beyond page页脚固定在底部,延伸到页面之外
【发布时间】:2011-08-05 17:36:32
【问题描述】:

试图使页脚粘在底部,并且内容会自动居中在页眉和页脚之间。

目前正在使用这种技术:http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

但我的页脚出现在下方,并在两者之间造成了巨大的差距。

网站:Stingrayimages.ca

编辑:所以我设法让页脚粘在底部。但是,页脚不在页面底部,它留下了一点滚动。并且当缩小窗口时,页脚不会在内容所在的位置停止。

我也不能让内容 div 留在中间而不弄乱一切。

【问题讨论】:

    标签: html css


    【解决方案1】:

    你的容器 div 应该包裹你的 Head div。我认为您将 Ryan 的头部区域误认为是设计师通常所说的页面头部,而实际上在示例中它是 html 的头部元素。底部的额外空间可能等于您的头部 div 的高度。

    请记住,在粘性页脚中,容器会包裹除页脚之外的所有正文内容。

    【讨论】:

    • 但我试图保持内容在页眉和页脚之间居中。容器有一个宽度,但标题需要有一个连续的宽度,如您所见。
    • 问题在于 CSS 能够进行垂直对齐,它必须有一个已知的父高度。例如,您可以放入一个 500px 的父 div 和一个带有 vertical-align:center 的子 div,它将以 250 为中心。但是,在此示例中,您的容器 div 永远不会是定义的高度,因为它因屏幕而异。因此,在粘性页脚上进行完美的垂直定位是不会发生的。您可以为 --most-- 屏幕捏造它,但这里不能选择完美。这不是解决方案的目的,只需将脚粘在底部即可。
    • 好吧,现在把头放在容器里。我不知道为什么页脚仍然超出页面。现在我如何将内容 div 居中?
    【解决方案2】:

    如果您使用与链接相同的技术,则缺少页脚位置。

    仍然,通过您链接的示例,查看结构:

    <style type="text/css">
    html, body {
        height: 100%;
    }
    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
    }
    .footer, .push {
        height: 142px; /* .push must be the same height as .footer */
    }
    </style>
    <div class="wrapper">
      <div class="header"></div>
      <div class="push"></div>
    </div>
    <div class="footer"></div>
    

    但我宁愿选择这样的东西:

    <style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    
    div#container {
        position: relative;
        margin: 0 auto;
        height: auto !important;
        height: 100%; /* IE6: min-height*/
        min-height: 100%;
    }
    
    div#header {
    
    }
    
    div#content {
        padding: 1em 1em 5em;
    }
    
    div#footer {
        position: absolute;
        width: 100%;
        bottom: 0;
    }
    </style>
    <div id="container">
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>
    </div>
    

    【讨论】:

    • 这行不通!页脚必须在容器之外才能使用此解决方案。
    • 不完全是。粘性页脚的原则之一是在页眉和页脚之间填充中心“内容”区域。你的内容随着内容而增长,但没有填满。因此,如果用户试图在内容区域上重复背景,它只会达到内容的范围。粘性页脚的天才之处在于它不使用绝对定位。
    • 那要看你怎么理解粘页脚了?请参阅 OP 所指的链接,他们完全按照我发布的方式进行操作。粘贴页脚不必一直可见,但可以跟随内容。
    • 在页眉、页脚和内容部分设置不同的颜色,您就会明白我的意思了。如果您准确地复制教程,正文将填充页眉和页脚之间的位置。您的内容部分和页脚之间将有空白。这就是绝对定位与相对定位之间的区别。如果您有大量正文内容,页脚将始终推开。
    • 我仍然明白你的意思。我做了一些代码,显示了页眉、内容和页脚区域。现在有颜色 (jsfiddle.net/xgZgd/10)。页脚始终位于屏幕底部,但如果它们的内容过多,它将转到滚动底部。为什么这不是 OP 的答案?这正是他在链接中所指的内容。
    猜你喜欢
    • 2013-08-15
    • 2013-09-25
    • 2014-11-30
    • 2015-10-21
    • 2022-01-10
    • 1970-01-01
    • 1970-01-01
    • 2016-12-18
    相关资源
    最近更新 更多