这是我的页脚代码，我怎样才能让它显示在页面底部而不是在它上面的内容下方？
/*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>
注意：这不需要是固定页脚
实际上有两个主要选择：
两者中较容易的是固定页脚。
为了使页脚固定，在 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');
}
推送的页脚有点棘手。这是一个很棒的图形，显示了当没有足够的内容时为什么页脚不会留在页面底部：
基本上，问题正在发生，因为页脚元素被“推”在它上方的元素下方，并且该元素的高度没有页面的高度那么长。为了解决这个问题，您需要确保页脚被“推”到页面的整个高度（减去页脚的高度）。
这是如何做到的：
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;
}
这是有关如何执行此操作的更详细的教程以及上述代码的来源。
这是来自同一来源的代码的工作演示。
Bootstrap 有一个页脚的示例，它贴在页面底部： https ://getbootstrap.com/examples/sticky-footer/
这是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;
}
然后在 HTML 中：
<footer class="footer">
</footer>
用很酷的效果修复了底部的页脚检查 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>
而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;
}
如果有人再次陷入困境，这是一个没有黑客的现代解决方案
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：
/**
* 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;
}
我通过简单地在我的 HTMLmin-height的主体上使用解决了这个问题。container
所以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>
然后是 CSS
.top-nav {
height: 4rem;
}
.main-container {
min-height: calc(100vh - 4rem - 4rem);
}
.footer {
height: 4rem;
}
使用 SCSS，您可以使用变量来跟踪顶部导航和页脚高度，然后执行类似的操作
.main-container {
min-height: calc(100vh - #{$top-nav-height} - #{$footer-height});
}
这不是一个完美的解决方案，因为它不会将您的页脚完全放在视口的底部，但是当内容太短时它会将其推到底部并防止页脚在屏幕中间向上。
我猜你的意思是你希望页脚保持在页面底部，即使页面上没有足够的内容来填充视口的高度？
如果是这种情况，您可以使用这个技巧：CSS 粘页脚 - http://ryanfait.com/sticky-footer/、http://www.cssstickyfooter.com/或http://css-tricks.com/片段/css/sticky-footer/
粘性页脚技巧通常依赖于在包装 div 上声明最小高度。这意味着您必须重新格式化您的 HTML 代码，如下所示：
<div id="wrap">
<div id="content">
/* Main body content */
</div>
</div>
<div id="footer">
/* Footer content here */
</div>
对于 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;
}
如果您的页脚可能具有可变高度，则必须使用 JavaScript设置底部填充#content和顶部边距。#footer该值取决于#footer元素本身的计算高度。
您可能需要将 html 元素高度设置为 100%，否则您的页面本身将只是您内容的必要高度。我自己遇到了这个。
#main {padding-bottom: 150px;} /* Should have the same value of footer's height */
#footer {position: relative;
margin-top: -150px; /* footer's height */
只需使用 flex-box：将 body 显示设置为 flex，然后将页脚与 flex 端对齐。这样，页脚将始终是最后的最后一个组件。
body {
display: flex;
flex-direction: column;
}
footer {
align-self: flex-end;
}Material Design Bootstrap 有一个很棒的类：fixed-bottom. 这是我使用的。
在页脚自动将其位置设置在底部后，您需要设置父级的高度。
如果出现此问题后无法在父 div 或页脚部分添加内容或高度。