CSS使页面页脚保持在页面底部的最小高度，但不与页面重叠


CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

我有下一页(deadlink:http://www.workingstorage.com/Sample.htm页)，它有一个页脚，我不能让它位于页面底部。

我要页脚

  • 当页面较短且屏幕未填满时，贴在窗口底部，以及
  • 停留在文档结尾，当内容超过一个屏幕时(而不是重叠内容)，按正常方式向下移动。

CSS是继承的，让我困惑；我似乎无法正确地更改它，使内容的高度最小，或使页脚位于底部。

相关讨论

一个简单的方法是让你的页面上的主体100%，同时使用100%的min-height。如果页脚的高度不变，则此操作正常。

为页脚加上负的上边距：

1
2
3
4
5
6
#footer {
    clear: both;
    position: relative;
    height: 40px;
    margin-top: -40px;
}
相关讨论

我已经开发了一种非常简单的方法来将页脚固定在底部，但是作为最常见的方法，您需要调整它以适应页脚的高度。视图演示

下面的方法使用了一个"技巧"，在body上放置一个::after伪元素，并将其设置为具有精确的页脚高度，这样它将占用与页脚完全相同的空间，因此当页脚位于其上时，它看起来像是页脚真的占用了空间并消除了负的AFF。它的绝对位置的ECTS(例如，浏览身体的内容)

HTML(基本公共标记)

10

1
2
3
4
5
<body>
  <header>Header</header>
  Content</article>
  <footer>Footer</footer>
</body>

以下方法允许动态页脚高度：使用Frasbox

1
2
3
4
5
6
7
8
9
10
11
12
13
html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{
  display:flex;
  flex-direction:column;
}

footer{
  margin-top:auto;
}
1
2
3
4
5
<body>
  <header>Header</header>
  Content</article>
  <footer>Footer</footer>
</body>

使用表格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
html,body { height: 100%;  margin: 0; }

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%;
}

footer {
   display: table-row;
}
1
2
3
4
5
<body>
  <header>Header</header>
  Content</article>
  <footer>Footer</footer>
</body>

相关讨论

一种非常简单的跨浏览器工作方式是：

网址：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

HTML

1
 

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
相关讨论

从IE7开始，您可以简单地使用

1
2
3
4
#footer {
    position:fixed;
    bottom:0;
}

请参阅Canius以获取支持。

相关讨论

我用这个把我的脚贴在底部，它对我很有用：

HTML

1
2
3
4
5
6
7
8
<body>
   
        <!-- Your page's content goes here, including header, nav, aside, everything -->
   
    <footer>
        <!-- Footer content -->
    </footer>
</body>

这是HTML中唯一需要做的修改，将div与"allButFooter"类一起添加。我对所有的页面都这样做了，那些非常短的页面，我知道页脚不会粘在底部，而且页面足够长，我已经知道必须滚动。我这样做了，所以我可以看到它在页面内容是动态的情况下工作正常。

CSS

1
2
3
.allButFooter {
    min-height: calc(100vh - 40px);
}

"allButFooter"类有一个min-height值，它取决于视区的高度(100vh表示视区高度的100%)和页脚的高度，我已经知道它是40px。

这就是我所做的，它对我来说非常有效。我并没有在每一个浏览器上都尝试过，只有火狐、Chrome和Edge，结果和我想要的一样。页脚固定在底部，您不必处理z索引、位置或任何其他属性。文档中每个元素的位置都是默认位置，我没有将其更改为绝对或固定或任何内容。

使用响应式设计

这是我想澄清的问题。当我使用Twitter-Bootstrap进行响应式设计时，这个具有相同页脚(40px高)的解决方案并不像我预期的那样工作。我必须修改函数中减去的值：

1
2
3
.allButFooter {
    min-height: calc(100vh - 95px);
}

这可能是因为Twitter-Bootstrap有自己的利润和填充物，所以我必须调整这个值。

希望这对你们有用！至少，这是一个简单的解决方案，而且不涉及对整个文档进行大的更改。

相关讨论

我使用的一个简单的解决方案，从IE8开始工作+

给出最小高度：在HTML上为100%，这样，如果内容小于静态页面，则页面将采用完整的视图端口高度，页脚将停留在页面底部。当内容增加时，页脚随内容向下移动，并保持在底部。

JS小提琴工作演示：http://js fiddle.net/3l3h64qo/2/

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html{
  position:relative;
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
}
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

HTML

1
2
3
4
5
6
7
8
9
   <html>
    <body>
       
            <!-- All the page content goes here-->
       
       
       
    </body>
    </html>
相关讨论

然而，另一个真正简单的解决方案是：

1
2
3
4
5
6
7
8
9
10
11
12
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

杰西德

诀窍是在整个文档中使用display:table，在页脚中使用display:table-row和height:0。

由于页脚是唯一显示为table-row的正文子级，因此它将呈现在页面底部。

相关讨论

要小心的一件事是移动设备，因为它们以"不寻常"的方式实现了视区的概念：

http://developer.apple.com/library/ios/documentation/applelapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html//apple-ref/doc/uid/tp40006509-sw25

因此，使用position: fixed;(正如我在其他地方看到的建议)通常是不可行的。当然，这取决于你所追求的具体行为。

我在台式机和移动设备上使用过，并且工作得很好，是：

1
2
3
<body>
   
</body>

具有

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
相关讨论

这样做

1
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

您还可以阅读flex，它受所有现代浏览器的支持。

更新：我读了关于flex的文章，并尝试了一下。这对我很有用。希望对你也一样。这是我如何实现的。这里的main不是id它是DIV

1
2
3
4
5
6
7
8
9
10
11
body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

在这里，您可以阅读有关flex的更多信息https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请记住，旧版本的IE不支持它。

这被称为"粘脚"。谷歌在搜索它时会得到很多结果。我已经成功地使用了一个CSS粘性页脚。但还有更多。

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
       
            <p>
Your website content here.
</p>
           
       
       
            <p>
Copyright (c) 2008
</p>
       
    </body>
</html>

此代码的源

相关讨论

我的jquery方法，如果页面内容小于窗口高度，则将页脚放在页面底部，否则将页脚放在内容之后：

另外，在其他代码之前将代码保存在自己的附件中，这将减少重新定位页脚所需的时间。

1
2
3
(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ?"inherit" :"fixed");
})();

我只是回答了下面类似的问题：

在具有固定页眉的页面底部放置页脚

我对网络开发很陌生，我知道这个问题已经得到了解答，但这是我找到的解决它的最简单的方法，我认为这有点不同。我想要一些灵活的东西，因为我的web应用程序的页脚有一个动态的高度，我最终使用了flexbox和一个垫片。

  • 首先设置HTML和正文的高度
    • 1
    2
    3
    4
    5
    6
    html, body {
        height: 100%;
        display: flex;
        flex-direction: column;
        margin: 0px;
    }

    我假设我们的应用程序有一个column行为，在这种情况下，您需要添加一个头部、英雄或任何垂直对齐的内容。

  • 创建间隔类
    • 1
    2
    3
    .spacer {
        flex: 1;
    }
  • 所以以后你的HTML可能是
    • 1
    2
    3
    4
    5
    6
    7
    8
    <html>
      <body>
        <header> Header </header>
        Some content...
       
        <footer> Footer </footer>
      </body>
    </html>

    你可以在这里玩https://codepen.io/anon/pen/xmgzql

    我一直在调查这个问题。我看过很多解决方案，每个都有问题，通常涉及到一些神奇的数字。

    因此，使用各种来源的最佳实践，我提出了这个解决方案：

    http://jsfiddle.net/vfsm3/248/

    我想在这里实现的是让主要内容在绿色区域内的页脚和页眉之间滚动。

    下面是一个简单的CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    header {
        height: 4em;
        background-color: red;
        position: relative;
        z-index: 1;
    }
    .content {
        background: white;
        position: absolute;
        top: 5em;
        bottom: 5em;
        overflow: auto;
    }
    .contentinner {
    }
    .container {
        height: 100%;
        margin: -4em 0 -2em 0;
        background: green;
        position: relative;
        overflow: auto;
    }
    footer {
         height: 2em;
         position: relative;
         z-index: 1;
         background-color: yellow;
    }
    相关讨论

    这就是我解决同一个问题的方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    html {
      height: 100%;
      box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    body {
      position: relative;
      margin: 0;
      padding-bottom: 6rem;
      min-height: 100%;
      font-family:"Helvetica Neue", Arial, sans-serif;
    }

    .demo {
      margin: 0 auto;
      padding-top: 64px;
      max-width: 640px;
      width: 94%;
    }

    .footer {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 1rem;
      background-color: #efefef;
      text-align: center;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
      CSS"Always on the bottom" Footer

      <p>
    I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.
    </p>

      <p>
    However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).
    </p>

      <p>
    If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).
    </p>

      <p>
    This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <wyn>position: absolute; </wyn>.
    </p>


    This footer will always be positioned at the bottom of the page, but not fixed.

    这是我的两美分。与其他解决方案相比，不需要添加额外的容器。因此，这个解决方案要优雅一点。在代码示例的下面，我将解释这项工作的原因。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            test
            <style>

                html
                {
                    height:100%;
                }

                body
                {
                    min-height:100%;
                    padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                    margin:0; /*see above comment*/
                }

                body
                {
                    position:relative;
                    padding-bottom:60px; /* Same height as the footer. */          
                }

                footer
                {
                    position:absolute;
                    bottom:0px;
                    height: 60px;

                    background-color: red;
                }

            </style>
        </head>
        <body>
            <header>header</header>


            <footer>footer</footer>
        </body>
    </html>

    所以我们要做的第一件事就是把最大的容器(HTML)变成100%。HTML页面和页面本身一样大。接下来我们设置body height，它可以大于HTML标签的100%，但它至少应该是一样大的，因此我们使用minheight 100%。

    我们也使身体相对。相对意味着您可以从原始位置围绕相对位置移动块元素。不过我们这里不使用。因为相对有第二个用途。任何绝对元素对根(html)或第一个相对父/祖父母都是绝对的。这就是我们想要的，我们希望页脚是绝对的，相对于身体，也就是底部。

    最后一步是将页脚设置为absolute和bottom:0，这会将其移动到相对的第一个父/祖父母(当然是主体)的底部。

    现在我们还有一个问题要解决，当我们填充完整的页面时，内容将放在页脚下面。为什么？因为页脚不再在"HTML流"中，因为它是绝对的。那么我们该如何解决这个问题呢？我们将在主体上添加填充底部。这可以确保主体实际上比其内容更大。

    我希望我对你们说的很清楚。

    只需将HTML、正文和除页脚以外的其他行设置为100%。例如

    1
    2
    3
    4
    <body>
    <header></header>
    <content></content>
    <footer></footer>

    CSS变为

    1
    2
    3
    html, body, header, content{
    height:100%;
    }

    只需自定义页脚部分

    1
    2
    3
    4
    5
    6
    7
    8
    .footer
    {
       position: fixed;
       bottom: 0;
       width: 100%;
       padding: 1rem;
       text-align: center;
    }

    10

    相关讨论

    1
    2
    3
    footer {
      margin-top:calc(5% + 60px);
    }

    这很好

    一个非常简单的灵活解决方案，不假设固定的高度或改变元素的位置。

    HTML

    1
    2
    3
      <header></header>
      <main></main>
      <footer></footer>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    main {
      flex: 1;
    }

    浏览器支持

    所有主要浏览器，IE11及以下版本除外。

    确保使用autoprefixer作为适当的前缀。

    10

    1
    2
    3
      <header></header>
      <main></main>
      <footer></footer>

    使用jquery的动态一行程序

    我遇到的所有CSS方法都太死板了。此外，如果设计中不包括将页脚设置为fixed，则不能选择。

    测试：

    • 铬：60
    • FF：54
    • IE：11

    假设此布局：

    1
    2
    3
    4
    5
    6
    7
    8
    <html>

    <body>
     
     
    </body>

    </html>

    使用以下jquery函数：

    1
    $('#content').css("min-height", $(window).height() - $("#footer").height() +"px");

    这样做的目的是将#content的min-height设置为窗口高度-页脚的高度，可能是当时的高度。

    由于我们使用了min-height，如果#content的高度超过了窗户的高度，那么这个功能会优雅地下降，因为它不需要，所以不会产生任何影响。

    见效：

    1
    2
    3
    $("#fix").click(function() {
      $('#content').css("min-height", $(window).height() - $("#footer").height() +"px");
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      background: #111;
    }

    body {
      text-align: center;
      background: #444
    }

    #content {
      background: #999;
    }

    #footer {
      background: #777;
      width: 100%;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    <html>

    <body>
     
        <p>
    Very short content
    </p>
        <button id="fix">Fix it!</button>
     
      Mr. Footer
    </body>

    </html>

    JSfiddle上的相同代码段

    奖金:

    我们可以更进一步，使此函数适应动态查看器高度调整，如下所示：

    1
    2
    3
    $(window).resize(function() {
        $('#content').css("min-height", $(window).height() - $("#footer").height() +"px");
      }).resize();
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      background: #111;
    }

    body {
      text-align: center;
      background: #444
    }

    #content {
      background: #999;
    }

    #footer {
      background: #777;
      width: 100%;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    <html>

    <body>
     
        <p>
    Very short content
    </p>
     
      Mr. Footer
    </body>

    </html>

    你可以做到这一点

    1
    2
    3
    4
    5
    6
    7
    8
    .footer {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 1rem;
      text-align: center;
    }

    我在我的许多项目中使用过，从未遇到过任何一个问题：)

    代码在代码段中，仅供参考。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    * {
        margin: 0;
    }
    html, body {
        height: 100%;
    }
    .wrapper {
        min-height: 100%;
        height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
        height: 100%;
        margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
      background:green;
    }
    .footer, .push {
        height: 50px; /* .push must be the same height as .footer */
    }

    .footer{
      background:gold;
      }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <html>
    <head>
    <meta charset="utf-8">
    Untitled Document
    </head>

    <body>
     
        Content Area
       
     
     
       
     
     
        Footer Area
       
    </body>
    </html>