Html 页脚或内容底部，以较低者为准
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12239166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Footer at bottom of page or content, whichever is lower
提问by Will
I have the following structure:
我有以下结构：
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
I dynamically load content in the <article>using javascript. Because of this, the height of the <article>block can change.
我在<article>使用 javascript 中动态加载内容。因此，<article>块的高度可以改变。
I want the <footer>block to be at the bottom of the page when there is a lot of content, or at the bottom of the browser window when only a few lines of content exist.
<footer>当内容很多时，我希望块位于页面底部，或者当只有几行内容时位于浏览器窗口的底部。
At the moment I can do one or the other... but not both.
目前我可以做一个或另一个......但不能同时做。
So does anyone know how I can do this - get the <footer>to stick to the bottom of the page/content or the bottom of the screen, depending on which is lower.
那么有谁知道我该怎么做 - 将<footer>其粘贴到页面/内容的底部或屏幕底部，具体取决于哪个较低。
回答by zzzzBov
Ryan Fait's sticky footeris very nice, however I find its basic structure to be lacking*.
Ryan Fait 的粘性页脚非常好，但我发现它缺乏基本结构*。
Flexbox Version
弹性盒版本
If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, andsupport a dynamically sized footer.
如果你足够幸运，你可以使用 flexbox 而不需要支持旧浏览器，粘性页脚变得非常简单，并支持动态大小的页脚。
The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes is a full-height wrapper element with display: flexand at least one sibling with a flexvalue greater than 0:
使用 flexbox 让页脚粘在底部的技巧是让同一容器中的其他元素垂直伸缩。它所需要的只是一个全高包装元素，display: flex并且至少有一个flex值大于 的同级元素0：
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
article {
flex: 1;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
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: 100%;
}
article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>If you can't use flexbox, my base structure of choice is:
如果你不能使用 flexbox，我选择的基本结构是：
<div class="page">
<div class="page__inner">
<header class="header">
<div class="header__inner">
</div>
</header>
<nav class="nav">
<div class="nav__inner">
</div>
</nav>
<main class="wrapper">
<div class="wrapper__inner">
<div class="content">
<div class="content__inner">
</div>
</div>
<div class="sidebar">
<div class="sidebar__inner">
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__inner">
</div>
</footer>
</div>
</div>
Which isn't all that far off from:
离：
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
The trick to getting the footer to stick is to have the footer anchored to the bottom padding of its containing element. This requiresthat the height of the footer is static, but I've found that footers are typically of static height.
使页脚粘住的技巧是将页脚锚定到其包含元素的底部填充。这要求页脚的高度是静态的，但我发现页脚的高度通常是静态的。
HTML:HTML：<div id="main-wrapper">
...
<footer>
</footer>
</div>
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>With the footer anchored to #main-wrapper, you now need #main-wrapperto be at least the height of the page, unless its children are longer. This is done by making #main-wrapperhave a min-heightof 100%. You also have to remember that its parents, htmland bodyneed to be as tall as the page as well.
随着页脚锚定到#main-wrapper，您现在需要#main-wrapper至少是页面的高度，除非它的子元素更长。这是通过做#main-wrapper有一个min-height的100%。你还必须记住它的父母，html并且body需要和页面一样高。
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
} <div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>Of course, you should be questioning my judgement, as this code is forcing the footer fall off the bottom of the page, even when there's no content. The last trick is to change the box model used by the #main-wrapperso that the min-heightof 100%includes the 100pxpadding.
当然，您应该质疑我的判断，因为即使没有内容，此代码也会迫使页脚从页面底部脱落。最后一个诀窍是要改变由所使用的盒模型#main-wrapper，使得min-height中100%包括100px填充。
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
} <div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>And there you have it, a sticky footer with your original HTML structure. Just make sure that the footer's heightis equal to #main-wrapper's padding-bottom, and you should be set.
有了它，一个带有原始 HTML 结构的粘性页脚。只要确保footer'sheight等于#main-wrapper's padding-bottom，你应该被设置。
* The reason I find fault with Fait's structure is because it sets the .footerand .headerelements on different hierarchical levels while adding an unnecessary .pushelement.
* 我认为 Fait 结构有问题的原因是它在不同层次上设置.footer和.header元素，同时添加了不必要的.push元素。
回答by Josh Mein
Ryan Fait's sticky footeris a simple solution that I have used several times in the past.
Ryan Fait 的粘性页脚是一个简单的解决方案，我过去曾多次使用过。
Basic HTML:
基本 HTML：
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div class="content"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
CSS:
CSS:
* {
margin: 0;
}
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 */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Translating this to be similar to what you already have results with something along these lines:
将其转换为类似于您已经通过以下方式获得的结果：
HTML:
HTML:
<body>
<div class="wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<div class="push"></div>
</div>
<footer>
</footer>
</body>
CSS:
CSS：
* {
margin: 0;
}
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 */
}
Just dont forget to update the negative on the wrapper margin to match the height of your footer and push div. Good luck!
只是不要忘记更新包装器边距上的负数以匹配页脚和推送 div 的高度。祝你好运！
回答by Galina E
I was looking to solve this problem without adding any additional markup, so I ended up using the following solution:
我希望在不添加任何额外标记的情况下解决这个问题，所以我最终使用了以下解决方案：
article {
min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}
footer {
height: 50px;
}
header {
height: 50px;
}
nav {
height: 50px;
}<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>You have to know the heights of header, nav and footer to be able to set the min-height for the article. By this, if article has only few lines of content, the footer will stick to the bottom of the browser window, otherwise it will go below all the content.
您必须知道页眉、导航和页脚的高度才能设置文章的最小高度。这样，如果文章只有几行内容，页脚将粘在浏览器窗口的底部，否则它将位于所有内容的下方。
You can find this and other solutions posted above here: https://css-tricks.com/couple-takes-sticky-footer/
您可以在此处找到上面发布的此解决方案和其他解决方案：https: //css-tricks.com/couple-takes-sticky-footer/
