HTML/CSS页脚问题

我查看了以前的SO帖子和tuts，但没有用我自己的代码运气。我的页脚不会粘在页面的底部（不是窗口）。我不想让内容滚动浏览页脚。页面大小在长度上差别很大，并且希望始终在页面底部有一个页脚。HTML/CSS页脚问题

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

我的HTML的结构为这样：

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

来源

2012-10-15 Ben

向我们展示了一些HTML代码也做出了[的jsfiddle（HTTP：// jsfiddle.net /）例如 – haynar

同意，它不清楚你想要什么，出了什么问题... –

我添加了基本的HTML结构 – Ben

您需要将您的页脚移动到容器元素和body元素的外部并使用position：absolute;和底部：0;总是将它修复到html元素的底部。

我说身体以外的身体，虽然主要身体标记需要的HTML元素的高度，有一些版本的IE浏览器，其中并非如此。由于您没有粘贴您的HTML我显然不能告诉你修改的HTML，但你的CSS应该是这样的：

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

来源

2012-10-15 13:23:28 JamieM23

除非我做错了什么，否则将#footer移到主体外部仍然只会将其设置在屏幕的底部，而不是显示内容的高度。 – Ben

它将它设置为body标签的高度，它会随着内容的扩展而扩展，所以当内容对于视口来说太小时，它会一直出现在它的底部，当内容大于视口时它会做你期望的并且仍然低于内容（而不是通过固定在窗口底部来覆盖内容）。 – JamieM23

啊，我明白了。我得到它的工作。我添加了一个粘滞的导航（顶部菜单），导致我的左轮在滚动后跳跃。所以当我把它放在相对的位置时，它会抛出我的页脚（这导致了这个线程）。把它从体内拿出来固定它，在一些其他的调整之后。谢谢@ JamieM23！ – Ben