个人中心
gpt4 book ai didi

html - 页脚位置固定在页面底部

转载 作者：技术小花猫 更新时间：2023-10-29 11:58:30 27 4
gpt4 key购买 nike

我想将页脚放置在页面底部，该页脚也具有固定的页眉...

  • 不能与position: fixed一起使用-我不希望它保留在屏幕上，它应该位于页面的末尾，并且在滚动时表现正常。
  • 不在可见屏幕的底部-在页面的底部，即；毕竟所有其他内容。


    • 这是一个可以更好解释的图表:



    这是代码:
  • 我已经准备了一个演示: JSFiddle
  • 或参见下面的

    • <div id="header">Header</div>
    <div id="content">
        <p>Some content...</p>    
    </div>
    <div id="footer">Footer</div>

    body{
        /* Just to enable scrolling in JSFiddle */
        height: 1000px;
    }

    #header{
        width: 100%;
        height: 100px;
        position: fixed;
        top: 0px;
        z-index: 1;
    }

    #content{
        width: 100%;
        position: absolute;
        top: 100px; /*Height of header*/
        z-index: 0;
    }

    #footer{
        width: 100%;
        height: 100px;
        position: absolute;
        bottom: 0px;
    }

    /*For demo only*/
    #header, #footer{
        border: 3px dashed #333333;
        background: #FFFFFF;
    }

    #content{
        background: #CCCCCC;
        height: 200px;
    }

    最佳答案

    正如您已经提到的，position: fixed将相对于视口(viewport)而不是页面本身定位页脚。因此，我们必须使元素保持正常流动，并以某种方式将其放置在页面底部。

    有两种方法可以实现这一目标，这些方法在当时进行了广泛讨论。
    例如:

  • A List Apart的文章Exploring Footers-作者:Bobby Van Der Sluis，2004年
  • footerStickAlt-by Craig Erskine，2005
  • Sticky Footer-通过Shelly Cole，2006
  • How to keep footers at the bottom of the page-by Matthew James Taylor，2007
  • Make the Footer Stick to the Bottom of a Page-by Ryan Fait，2007
  • Refined version of Ryan Fait's Sticky Footer-通过Chris Coyier，2009
  • Sticky CSS footers: The flexible way(使用CSS Tables)-由Torben Haase撰写，2011年
  • Responsive Sticky Footer(Torben方法的改进版)-Joshua Cook，2013年
  • Solved by Flexbox的Sticky Footer-通过Philip Walton，2013

    • 粘页脚

    在这个答案中，我将使用 Ryan Fait's method，因为它简单易懂，并且可以满足您的需求(页眉和页脚高度均固定的情况)。

    考虑以下结构: 
    <div id="content"> <!-- content goes here. It may (not) include the header --> </div>
    <div id="footer">Footer</div>

    需要执行以下步骤:
  • 将下一步所需的height和<html>元素的<body>设置为100%。
  • 我们需要做的最重要的事情是确保#content足够高以将#footer向下推到页面上。因此，我们给#content一个min-height的100%。
  • So far，#content已采用视口(viewport)高度的100%，因此我们应将页脚向上拉以将其定位在页面底部。为此，我们可以给#content一个与页脚的margin-bottom等效的负height。另外，为了确保页脚出现在内容的顶部，我们应该对页脚position进行relative。 Demo Here 。
  • 可以看到，当#content随其内容增长时，某些内容会在页脚后面。我们可以通过在#content的末尾添加一个spacer元素或使用padding-bottom和 box-sizing: border-box 2的组合(也应该是supported on IE8)来避免这种情况。

    • 4.1添加间隔

    Example Here 
    <div id="content">
        <!-- content goes here -->
        <div class="spacer"></div>
    </div>
    <div id="footer">Footer</div>

    .spacer, #footer { height: 100px; }

    4.2 padding-bottom和 box-sizing的组合

    Updated Example 

    #content {
        min-height: 100%;
        margin-bottom: -100px; /* Equivalent to footer's height */
        padding-bottom: 100px; /* Equivalent to footer's height */

        box-sizing: border-box;
    }

    (请注意，由于简洁起见，省略了供应商前缀)

    添加标题
  • 如果 header 应在正常流中保持，则可以将其简单地添加到#content中，如下所示:
    ( Example Here )
    <div id="content">
        <div id="header">Header</div>
        ...
  • 但是，如果应该将定位在绝对 3位置，则需要按to prevent overlapping的顺序向下推送#content元素的内容。

    • 因此，同样，我们可以在#content( Example Here )的开头添加一个空格:
    <div id="header">Header</div>
    <div id="content">
        <div class="header-spacer"></div> 
        <!-- content goes here -->
        <div class="footer-spacer"></div> 
    </div>
    <div id="footer">Footer</div>

    或按以下方式使用padding-top和box-sizing的组合:
    <div id="header">Header</div>
    <div id="content"> <!-- content goes here. --> </div>
    <div id="footer">Footer</div>

    #content {
        min-height: 100%;
        margin-bottom: -100px; /* Equivalent to footer's height */

        padding-top   : 50px;  /* Equivalent to header's height */
        padding-bottom: 100px; /* Equivalent to footer's height */

        box-sizing: border-box;
    }

    Updated Example (请注意，由于简短起见，省略了供应商前缀)

    最后但并非不重要!

    如今，所有主要的现代Web浏览器都支持 box-sizing: border-box 声明(包括IE8)。但是，如果您正在寻找具有更广泛浏览器支持的传统方式，请坚持使用spacer元素。

    1.这是使 min-height: 100% 在#content元素上工作所必需的(因为百分比值相对于盒子的包含块的height由<body>建立)。另外，<html>应该有一个明确的 height ，以使height: 100%可以在<body>上使用。

    2. box-sizing: border-box 使UA计算框的width / height(包括填充和边框)。

    3. According to spec绝对定位的元素是position或absolute的元素。

    关于html - 页脚位置固定在页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18469262/

    27 4 0
    文章推荐： html - 防止居中布局在出现滚动条时移动其位置
    文章推荐： html - 如何在不换行的情况下并排排列多个
    技术小花猫
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com