CSS制作HTML页面的页脚留在了最小高度页面的底部，但不重叠的页面

Question

我有以下页面（Deadlink中：http://www.workingstorage.com/Sample.htm），有一个页脚，我不能在页面的底部，使坐。

我想页脚

贴窗底部的页面时短，屏幕不填满，
留在文档端和向下移动为正常时，有比的内容一屏更多（而不是内容重叠）。

CSS的继承和befuddles我。我似乎无法改变它正确地把最低高度上的内容，或使页脚转到底部。

Answer 1

一个简单的方法就是让你的页面的主体100%，与min-height的100%了。如果您的页脚的高度不会改变这工作得很好。

给页脚负的margin-top：

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

Answer 2

这被称为一个棘手的注脚。一种是google search来了一个很大的成果。 A CSS Sticky Footer是我已经成功地使用了一个。但也有更多的。

CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

HTML：

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Source for this code

Answer 3

我只是在这里边回答类似的问题：

Position footer at bottom of page having fixed header

我很新的Web开发，我知道这已经已经回答了，但是这是我找到解决这个问题的最简单的方法，我认为是有些不同。我想要的东西灵活，因为我的web应用程序的页脚中有一个动态的高度，我结束了使用Flexbox的和间隔。

通过设置高度为HTML代码和身体开始

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

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

创建间隔类

.spacer {
    flex: 1; 
}

所以后来你的HTML可能是这样的

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

你可以用它在这里玩https://codepen.io/anon/pen/xmGZQL

Answer 4

我的jQuery的方法，这个人把页脚在页面的底部，如果页面含量小于窗口的高度，或者只是否则内容之后把页脚：

此外，保持在它自己的外壳代码之前，其他代码会降低它需要重新定位页脚的时间。

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

Answer 5

我自己一直在寻找到这个问题。我见过不少的解决方案和他们每个人有问题，往往涉及一些幻数。

因此，使用来自各种来源的最佳做法，我想出了这个解决方案：

http://jsfiddle.net/vfSM3/248/

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

这里是一个简单的CSS：

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

Answer 6

这是我如何解决同样的问题

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

<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <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 <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

Answer 7

这里是我的两分钱。相对于其他的解决方案，一个并不需要增加额外的容器。因此，该解决方案更优雅一点。下面的代码示例，我将解释为什么这个工程。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <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页面是一样大的页面本身。接下来我们设置的车身高度，它可以比HTML标记的100％大，但它至少应该是一样大的，所以我们用最小高度100％。

我们还做相对身体。相对意味着你可以从它原来的位置相对于周围的块元素移动。我们不使用，在这里虽然。因为相对于具有第二使用。任何绝对元素是绝对到根（HTML）或第一相对父母/祖父母。这就是我们想要的，我们希望页脚是绝对的，相对于身体，即底部。

最后一步是设置页脚绝对和底部：0，它移动到第一父母/祖父母的底部，是相（体ofcourse）。

现在，我们仍然有一个问题需要解决，当我们填写完整的页面，内容云页脚下方。为什么？好，因为页脚不再是“HTML流”里，因为它是绝对的。那么，我们如何解决这个问题？我们将填充底补充人体。这可以确保身体实际上是大于它的内容。

我希望我做了很多明确的你们。

Answer 8

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

这工作正常

Answer 9

一个非常简单的柔性的解决方案，不承担固定高度或元素的变化位置。

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

浏览器支持

所有主要的浏览器，除了IE11及以下。

确保使用Autoprefixer适当的前缀。

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

body,
html {
    margin: 0;
    padding: 0;
}

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

Answer 10

使用jQuery动态一张衬纸

所有的CSS方法我所遇到过于僵化。此外，页脚设置为fixed不是一个选项，如果这不是设计的一部分。

测试在：

铬：60
FF：54
IE：11

假设这个布局：

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

使用下面的jQuery函数：

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

什么是不设置为min-height到窗口高度#content - 页脚什么都可能是当时的高度。

因为我们使用的min-height，如果#content高度超过了窗口高度，功能缓慢下降，并没有任何影响什么，因为不需要的话。

看到它在行动：

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});

* {
  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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

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

</html>

在JsFiddle同一片段

奖金：

我们可以借此进一步使这个功能适应动态观众的高度调整，如下所示：

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();

* {
  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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

Answer 11

刚自定义页脚部分

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>

Answer 12

我已经开发了一个非常简单的方法在底部粘页脚，但作为最常用的方法，您将需要调整以满足您的页脚的高度。

VIEW DEMO

Flexbox的方法：

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

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

下面该方法使用“特技”通过在::after放置body伪元素，并将其设置为具有页脚的准确高度，所以它会占据页脚实现完全相同的空间，因此当页脚是absolute定位的在它，它会出现像页脚真的占用空间和消除负面影响的是绝对定位（例如，去在体内的含量）

`position:absolute`方法：（不允许动态页脚高度）

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

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

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

表格的布局方法：

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

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Answer 13

刚刚成立的HTML，身体，除了页脚100％，其他行。例如

<body>
<header></header>
<content></content>
<footer></footer>

CSS的变

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

Answer 14

你可以这样做

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

Answer 15

我在许多项目中，从来没有有任何单一的问题:)

供大家参考，代码片段中

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

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>

Answer 16

伟大的工程跨浏览器的一个非常简单的方法是这样的：

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

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

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

Answer 17

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

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

见caniuse支持。

Answer 18

我用这对我的躯坚守底部，它为我工作：

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

这就是你必须在HTML唯一可以做的修改，添加div与"allButFooter"类。我与所有的页面做的，那些是如此短暂，我知道页脚不会粘在底部，也页长，以至于我已经知道我不得不滚动。我这样做，所以我可以看到它在一个页面的内容是动态的情况下工作正常。

CSS

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

该"allButFooter"类具有取决于视口的高度（min-height指视口高度的100％）和页脚的高度，我已经知道是100vh一个40px值。

这就是我所做的，它完美地工作对我来说。我还没有尝试过在每一个浏览器，只是火狐，Chrome和边缘，结果是因为我想。页脚粘在底部，你不必用z-index，位置或其他任何性质的混乱。我的文档中的每个元素的位置是默认位置，我并没有将其更改为绝对的或固定的或任何东西。

与响应式设计工作

这里的东西，我想就一目了然了。该解决方案，以相同的页脚，这是40像素高如我所料，当我在响应式设计使用Twitter-Bootstrap工作没有工作。我不得不修改我在功能从其减去值：

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

这可能是因为Twitter-Bootstrap带有自己的边距和补，所以这就是为什么我不得不调整该值。

我希望这是一些使用了你们的！至少，这是一个简单的解决方案尝试，它不涉及使整个文档大的变化。

Answer 19

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

给最小高度：在HTML 100％，这样，如果含量小于依然页面需要众目睽睽口高度和页脚枝在页面底部。当含量增加页脚向下移动与内容，并反复粘底。

JS提琴工作演示：http://jsfiddle.net/3L3h64qo/2/

CSS

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

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

Answer 20

有一两件事要警惕的是移动设备，因为它们实现了“不寻常”的方式视口的想法：

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

因此，使用position: fixed;（因为我已经看到了在其他地方推荐）通常不是要走的路。当然，这取决于你之后的确切行为。

我已经使用，并在桌面和移动效果不错，就是：

<body>
    <div id="footer"></div>
</body>

同

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}

Answer 21

然而，另一种非常简单的解决方案是这样的一种：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

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

jsFiddle

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

由于页脚的是，有一个显示为table-row唯一的孩子身上，它在页面的底部呈现。

Answer 22

做这个

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

您还可以阅读有关弹性是所有现代浏览器都支持

更新：我读了有关弹性和尝试。它为我工作。希望它做同样为您服务。这里是我implemented.Here主是不是ID它是div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

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

在这里，你可以阅读更多有关柔性https://css-tricks.com/snippets/css/a-guide-to-flexbox/

千万记住它不是由旧版本的IE支持。

CSS制作HTML页面的页脚留在了最小高度页面的底部，但不重叠的页面

问题描述投票：293回答：22

22个回答

使用jQuery动态一张衬纸

奖金：

VIEW DEMO

Flexbox的方法：

`position:absolute`方法：（不允许动态页脚高度）

表格的布局方法：

HTML

CSS

CSS

HTML

最新问题

CSS制作HTML页面的页脚留在了最小高度页面的底部，但不重叠的页面

问题描述 投票：293回答：22

22个回答

使用jQuery动态一张衬纸

奖金：

VIEW DEMO

Flexbox的方法：

position:absolute方法：（不允许动态页脚高度）

表格的布局方法：

HTML

CSS

CSS

HTML

最新问题

问题描述投票：293回答：22

`position:absolute`方法：（不允许动态页脚高度）