使HTML页面页脚停留在页面底部的最小高度的CSS
我有以下页面（deadlink： http://www.workingstorage.com/Sample.htm ://www.workingstorage.com/Sample.htm）有一个页脚，我不能坐在页面的底部。
CSS是inheritance和困扰我; 我似乎无法正确地改变它，把内容的最低高度，或使页脚底部。
让身体100%的页面， min-height也是100% 。
页脚然后被赋予负边限：
#footer { clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em; }
从IE7开始，你可以简单地使用
#footer { position:fixed; bottom:0; }
看caniuse支持。
这是一个非常简单的方法，它可以很好的跨浏览器：
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; }
我已经开发出了一个很容易的方法来将Footer粘贴在底部，但是作为最常用的方法，您需要调整它以适合页脚的高度。
查看演示
下面的这个方法通过在body上放置一个::after伪元素来使用“诡计”，并将其设置为具有页脚的确切高度，所以它将占据与页脚完全相同的空间，所以当页脚是absolute定位在上面，看起来就像是页脚真的占据了空间，消除了它的绝对定位的负面影响（比如翻过身体的内容）
HTML（基本通用标记）
html, body{ height:100%; margin:0; } 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>
一个简单的解决scheme，我使用，从IE8 +的作品
在html上给min-height：100％，这样如果内容less了，那么页面仍然是完整的view-port height和footer sticks在页面底部。 当内容增加时，页脚随着内容向下移动并坚持下来。
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>
我用这个将我的页脚粘到底部，对我来说很有效：
HTML
<body> <div class="allButFooter"> <!-- Your page's content goes here, including header, nav, aside, everything --> </div> <footer> <!-- Footer content --> </footer> </body>
这是唯一需要在HTML中做的修改，用"allButFooter"类添加div 。 我把所有的页面都做了，那些很短的页面，我知道页脚不会粘在页面底部，页面也足够长，我已经知道我必须滚动页面。 我做到了这一点，所以我可以看到，在页面内容是dynamic的情况下，它可以正常工作。
CSS
.allButFooter { min-height: calc(100vh - 40px); }
"allButFooter"类的min-height值取决于视口的高度（ 100vh表示视口高度的100％）和页脚的高度，我已经知道是40px 。
这就是我所做的一切，对我来说它是完美的。 我没有在每个浏览器，只是Firefox，Chrome浏览器和边缘尝试，结果是我想要的。 页脚粘到底部，你不必乱搞z-index，位置或任何其他属性。 我文档中每个元素的位置都是默认位置，我没有将其更改为绝对位置或固定位置。
使用响应式devise
这是我想清楚的。 使用Twitter-Bootstrap进行响应式devise时，此解决scheme与40px高的相同页脚无法正常工作。 我不得不修改我在减函数中的值：
.allButFooter { min-height: calc(100vh - 95px); }
这可能是因为Twitter-Bootstrap带有自己的边距和填充，所以我必须调整这个值。
我希望这对你们有用处！ 至less，这是一个简单的解决scheme，而不需要对整个文档做大的修改。
有一点需要注意的是移动设备，因为它们以一种“不寻常”的方式实现了视口的概念：
因此，使用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; }
然而，另一个非常简单的解决scheme是：
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 footer的height:0为height:0 display:table-row 。
由于页脚是唯一一个以table-row显示的身体小孩，因此它将呈现在页面的底部。
这被称为粘脚。 谷歌search它带来了很多结果。 CSS粘滞页脚是我成功使用的一个。 但还有更多。
我的jquery方法，如果页面内容小于窗口高度，则将页脚放在页面的底部，或者将页脚放在内容之后，否则：
另外，在其他代码之前将代码保存在自己的机箱中将减less重新定位页脚所需的时间。
(function() { $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed"); })();
我自己一直在研究这个问题。 我已经看到了不less的解决scheme，每个解决scheme都有问题，通常涉及一些神奇的数字。
所以使用各种来源的最佳实践，我想出了这个解决scheme：
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; }
这是我的两分钱。 与其他解决scheme相比较，不需要添加额外的容器。 因此，这个解决scheme有点优雅。 在代码示例下面，我将解释为什么这个工作。
<!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％，但至less应该是大的，所以我们使用最小高度100％。
我们也使身体相对。 相对意味着您可以将块元素相对于其原始位置移动。 尽pipe这里我们不使用。 因为亲戚有第二次使用。 任何绝对元素都是绝对的根（HTML）或第一个相对的父母/祖父母。 这就是我们想要的，我们希望页脚是绝对的，相对于身体，即底部。
最后一步是将页脚设置为绝对和底部：0，将其移到相对的第一个父/祖父母的底部（body of course）。
现在我们仍然有一个问题需要解决，当我们填写完整的页面时，内容就在页脚的下面。 为什么？ 好吧，因为页脚已经不在“htmlstream”里面了，因为它是绝对的。 那么我们如何解决这个问题呢？ 我们将添加填充底部到身体。 这确保身体实际上比内容更大。
我希望我对你们说得很清楚。
只需将HTML，正文和其他行除了页脚设置为100％。 例如
<body> <header></header> <content></content> <footer></footer>
CSS变成
html, body, header, content{ height:100%; }
做这个
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
您还可以阅读有关flex的支持，所有现代浏览器
更新 ：我读了关于flex并尝试它。 它为我工作。 希望它对你也一样。 这里是我如何实现。这里主要不是ID是它的div
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不支持它。
dynamic使用jQuery一个class轮
我遇到的所有CSS方法都太僵化了。 另外，如果这不是devise的一部分，将页脚设置为fixed不是一个选项。
testing：
- Chrome：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");
所做的就是将#content的min-height设置为窗口高度 – 页脚的高度，以及当时的高度 。
因为我们使用了min-height ，所以如果＃内容高度超过了窗口的高度 ，那么这个函数将会优雅地降级，因为它不是必需的，所以没有任何效果。
看到它在行动：
$("#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>
这就是我解决同样的问题
HTML
<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>
CSS
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; }
你可以使用http://ryanfait.com/sticky-footer/ ，我用在我的许多项目，从来没有得到任何单一的问题:)
供您参考，代码在片段中
* { 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>
一个非常简单的灵活的解决scheme，不要假设固定的高度或元素的位置变化。
HTML
<div class="container"> <header></header> <main></main> <footer></footer> </div>
CSS
.container { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; }
浏览器支持
所有主stream浏览器，除了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; } ///////////////////////////////////////////// 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>
我知道这是旧的，但我已经使用时，页脚落在像下面的图像的浮动div的一个“黑客”是使用页面底部的宽度为100％的空表。
<div id="body"> <div style="float:left; height: 100px;">Nav<br />linka<br />linkb</div> <div id="content">content</div> </div> <table width="100%"><tr><td></td></tr></table> <div id="footer">Footer</div>
