css页脚不会显示在页面的底部 [英] css footer not displaying at the bottom of the page

问题描述

这是我的页脚代码，我怎样才能让页面显示在页面的底部，而不是在我的内容之上？  / *页脚* / 
 #footer .column {
 float：left; 
宽度：25％; 
} 
 
 #footer .column div {
 margin：5px; 
 height：200px; 
背景：#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> 
  

注意：这不需要是固定页脚

1. 固定页脚 strong>页脚始终可见在页面底部


2. 推送页脚 - 页脚 / em>添加到页面的底部，即使内容没有填充窗口

两者的更容易的是固定的页脚。

固定页脚

为了固定页脚，在CSS中将页脚的位置固定为 position：fixed 并将页脚定位到页面底部 bottom：0px 。以下是以及上述代码的来源。

以下是代码的工作演示来自同一个来源。

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

解决方案

There's really two main options:

1. Fixed Footer - the footer always is visible at the bottom of the page
2. Pushed Footer - the footer is pushed to the bottom of the page even when the content doesn't fill the window

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:fixed and position the footer to the bottom of the page bottom:0px. Here's a code snippet from 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 graphic showing 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

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

Here's a more detailed tutorial on how to do it as well as the source of the code above.

And here's a working demo of the code from the same source.

这篇关于css页脚不会显示在页面的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！