HTML / CSS Footer烦恼

本文介绍了HTML / CSS Footer烦恼的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我看过以前的SO帖子和tuts，但没有运气与我自己的代码。我的页脚不会粘在页面的底部（不是窗口）。我不想让内容滚动浏览我的页脚。页面大小的长度差异很大，并且希望在底部有一个页脚。

I've looked on previous SO posts and tuts but have not had any luck with my own code. My footer will not stick to the bottom of the page (not the window). I don't want content to scroll through my footer. The page sizes vary greatly in length and want to have a footer at the bottom at all times.

leftcol，rightcol和footer都在容器中。任何帮助都是极好的。

The leftcol, rightcol, and footer are all in the container. Any help would be awesome.

我的HTML结构如下：

My HTML is structured as so:

<body>
 <div id = "container">
  <div id = "leftcol">
      <h2></h2>
       </p>
  </div>
  <div id = "rightcol">
      <h2></h2>
      </p>
   </div>
   <div id ="footer">
       <p>...........</p>
   </div>
 </div>
</body>

这是我的CSS：

body {
    font-family: 'Rokkitt', Georgia, serif;
    font-size: 16px;
    background-color: #FFFFFF;
    line-height: 1.3em;
    height: auto;
    color: #252525;
    }

#container {
    display: block;
    width: 1024px;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
    }

#leftcol {
    display: block;
    float: left;
    margin: 20px 5px 5px 15px;
    width: 660px;
    position: absolute;
    height: auto;
    padding-bottom: 20px;
    }

#rightcol {
    display: block;
    float: right;
    margin: 30px 5px 5px 780px;
    position: absolute;
    width: 275px;
    height: auto;
    }

#footer {
    position: fixed;
    bottom: 0;
    width: 1024px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    }

推荐答案

外部的容器元素和body元素和使用位置：absolute;和底部：0;总是把它固定在html元素的底部。

you need to move your footer outside of the container element and the body element and use position:absolute; and bottom:0; to always fix it to the bottom of the html element.

我说在body之外，虽然主体标签需要o的html元素的高度，是IE的一些版本，在这不是这种情况。因为你没有粘贴你的HTML我显然不能显示修改html，但你的CSS应该看起来像：

I say outside of the body as, although majoritively the body tag takes o the height of the html element, there are some versions of IE in which this isn't the case. As you haven't pasted your HTML i obviously can't show you the revised html but you're css should look like:

#footer {
    position: absolute;
    bottom: 0;
    width: 1024px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    }

这篇关于HTML / CSS Footer烦恼的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！