Html css页脚未显示在页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15960290/
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
css footer not displaying at the bottom of the page
提问by Scott Bartell
this is my code for my footer, how can i make it display at the bottom of the page rather than right underneath my content above it?
这是我的页脚代码，如何让它显示在页面底部，而不是显示在它上面的内容下方？
/*footer */
#footer .column {
float: left;
width: 25%;
}
#footer .column div {
margin: 5px;
height: 200px;
background: #eeeeee;
}
<div id="footer">
<div class="column"><div></div></div>
<div class="column"><div></div></div>
<div class="column"><div></div></div>
<div class="column"><div></div></div>
</div>
Note: This does NOT need to be a fixed footer
注意：这不需要是固定页脚
回答by Scott Bartell
There's really two main options:
实际上有两个主要选择：
- Fixed Footer- the footer always is visibleat the bottom of the page
- Pushed Footer- the footer is pushedto the bottom of the page even when the content doesn't fill the window
- 固定页脚- 页脚始终在页面底部可见
- Pushed Footer-即使内容没有填满窗口，页脚也会被推到页面底部
The easier of the two is the fixed footer.
两者中更容易的是固定页脚。
Fixed Footer
固定页脚
To make the footer fixed, in CSS set the footer's position to fixed position:fixedand position the footer to the bottom of the page bottom:0px. Here's a code snippet from CSS-Tricks.
为了使页脚固定，在 CSS 中将页脚的位置设置为固定position:fixed并将页脚定位到页面底部bottom:0px。这是来自CSS-Tricks的代码片段。
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
Pushed Footer
推页脚
A pushed footer is a bit trickier. Here's a great graphicshowing why the footer doesn't stay at the bottom of the page when there isn't enough content:
推送的页脚有点棘手。这是一个很好的图形，显示了为什么当内容不足时页脚不会停留在页面底部：
Basically, the problem is happening because the footer element is 'pushed' under the element that is above it and the height of that element isn't as long as the height of the page. In order to fix this, you need to make sure that the footer gets 'pushed' down the full height of the page (minus the height of your footer).
基本上，问题的发生是因为页脚元素被“推”到了它上面的元素下方，并且该元素的高度没有页面的高度那么长。为了解决这个问题，您需要确保页脚被“推”到页面的整个高度（减去页脚的高度）。
Here's how to do it:
这是如何做到的：
HTML
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
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;
}
Here's a more detailed tutorial on how to do itas well as the source of the code above.
And here's a working demo of the codefrom the same source.
回答by kulbhushan charaya
Fixed your footer in bottom with cool effect
Check full page design in jsfiddle Jsfiddle
用很酷的效果修复了底部的页脚
检查 jsfiddle 中的整页设计Jsfiddle
<body>
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</header>
<div class="wrapper">
<div class="demo">
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
</div>
</div>
<footer>
<h1>kulbhushan charaya</h1>
</footer>
</body>
and css is
和 css 是
body {
background: #ffffff none repeat scroll 0 0;
padding:40px 0;
}
header{
position:fixed;
top:0;
z-index:999;
left:0;
width:100%;
background:#fff;
border-bottom:1px solid #ccc;
}
header ul li {
display: inline-block;
list-style: outside none none;
padding: 5px;
}
header ul li a {
color: #000000;
text-decoration: none;
}
footer {
bottom: 0;
left: 0;
position: fixed;
text-align: center;
width: 100%;
z-index: -1;
}
footer h1 {
margin: 0;
}
.wrapper {
background: #ffffff;
padding: 0 15px;
z-index: 1;
}
回答by shadowsora
Bootstrap have an example of a footer that sticks to the bottom of the page here: https://getbootstrap.com/examples/sticky-footer/
Bootstrap 有一个附在页面底部的页脚示例：https: //getbootstrap.com/examples/sticky-footer/
Here is the CSS:
这是CSS：
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Then in the HTML:
然后在 HTML 中：
<footer class="footer">
</footer>
回答by CodyBugstein
I solved this by simply using min-heighton the main containerof my HTML.
我通过简单地min-height在container我的 HTML的主要部分使用来解决这个问题。
So HTML:
所以 HTML：
<body>
<div class="top-nav">My Nav Bar</div>
<div class="main-container">
All my content
</div>
<div class="footer">
My footer
</div>
</body>
and then CSS
然后CSS
.top-nav {
height: 4rem;
}
.main-container {
min-height: calc(100vh - 4rem - 4rem);
}
.footer {
height: 4rem;
}
With SCSS you can use variables to track the top-nav and footer heights and then do something like
使用 SCSS，您可以使用变量来跟踪顶部导航和页脚高度，然后执行类似操作
.main-container {
min-height: calc(100vh - #{$top-nav-height} - #{$footer-height});
}
This is not a perfectsolution because it won't put your footer exactlyat the bottom of the viewport but it will push it down to the bottom when the content is too short and prevents the footer from being way up in middle of the screen.
这不是一个完美的解决方案，因为它不会将您的页脚正好放在视口的底部，但是当内容太短时它会将其推到底部并阻止页脚在屏幕中间向上移动。
回答by Zumo
if anyone is stuck with this again, this is a modern solution without hacks
如果有人再次坚持这个，这是一个没有黑客的现代解决方案
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:
CSS：
/**
* Demo Styles
*/
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%;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
回答by xinthose
Material Design Bootstrap has a great class: fixed-bottom. It is what I use.
Material Design Bootstrap 有一个很棒的类：fixed-bottom. 这是我使用的。
回答by Terry
I guess what you mean is that you would like the footer to remain at the bottom of the page, even when there is insufficient content on the page to fill the height of the viewport?
我猜您的意思是您希望页脚保留在页面底部，即使页面上的内容不足以填充视口的高度？
If that is the case, you can use this trick: CSS sticky footer - http://ryanfait.com/sticky-footer/, http://www.cssstickyfooter.com/or http://css-tricks.com/snippets/css/sticky-footer/
如果是这样的话，你可以使用这一招：CSS粘页脚- http://ryanfait.com/sticky-footer/，http://www.cssstickyfooter.com/或http://css-tricks.com/片段/CSS/粘性页脚/
The sticky footer trick typically relies on declaring a minimum-height on a wrapper div. This means that you will have to reformat your HTML code as follow:
粘性页脚技巧通常依赖于在包装器 div 上声明最小高度。这意味着您必须按如下方式重新格式化 HTML 代码：
<div id="wrap">
<div id="content">
/* Main body content */
</div>
</div>
<div id="footer">
/* Footer content here */
</div>
For the CSS:
对于 CSS：
html, body, #wrap {
height: 100%;
}
#wrap {
height: auto;
min-height: 100%;
}
#content {
overflow: hidden;
padding-bottom: (footer height);
}
#footer {
position: relative;
margin-top: -(footer height); /* Note the negative value */
height: (footer height);
clear:both;
}
If your footer may have variable height, you will have to set the bottom padding of #content, and top margin of #footerwith JavaScript. The value depends on the computed height of the #footerelement itself.
如果您的页脚可能具有可变高度，则必须使用 JavaScript设置 的底部填充#content和顶部边距#footer。该值取决于#footer元素本身的计算高度。
回答by Stephen J
you may need to set the html element height to 100%, otherwise your page itself will only be the necessary height for your content. I ran into this myself.
您可能需要将 html 元素高度设置为 100%，否则您的页面本身将只是您的内容所需的高度。我自己遇到了这个。
回答by stcheng
#main {padding-bottom: 150px;} /* Should have the same value of footer's height */
#footer {position: relative;
margin-top: -150px; /* footer's height */
