Question

我一天前开始学习CSS，HTML和其他很酷的东西。我真的不明白为什么我的页脚不起作用。

你能帮助我解决我的问题，告诉我我做错了什么，或者告诉我，我应该去玩俄罗斯方块吗？

HTML CODE：

<title>MyDotCom</title>
<body>
  <div id="header">My awesome page title, logo, etc.</div>
  <div id="left">Navigation menu</div>
  <div id="bar">Random bar, lol.</div>
  <div id="footer">Coded by: me</div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
  </div>
</body>

CSS代码：

#header {
  border-radius: 5px;
  background-color: #C6E2FF;
  width: 100%;
  height: 100px;
  position: relative;
  margin-top: -10px;
  margin-bottom: 10px;
}
#bar {
  border-radius: 8px;
  background-color: #6E4005;
  width: 90%;
  height: 40px;
  float: both;
  margin-left: 10%;
  position: relative;
  z-index:1;
}
#left {
  float:left;
  background-color: #F6C483;
  margin-bottom: 10px;
  width: 20%;
  height:400px;
  position: relative;
  z-index: 2;
}
#content {
  position: relative;
  float: right;
  width: 80%;
  height: 360px;
  background-color: #F4EBC3;
  margin-bottom: 10px;
}
#footer {
  background-color: #B0B0B0;
  position:absolute;
  clear:both;
  height: 30px;
}

我尝试将position:absolute;更改为position:relative;，但它无效。

很难向你寻求帮助，因为它可能非常简单，但我尝试过，并尝试过，并且不知道该怎么做。

Answer 1

如何删除position: absolute;并在html中将页脚移到content下方？

modified code

Answer 2

以下是一些指针，您需要设置底部，顶部，左侧或右侧以定位绝对元素。

此外，将它们包装在容器/包装中并给它一个相对位置，这样绝对定位的元素不会在奇数位置结束，位置相对强制它到包装器的尺寸，所以bottom:0;使它粘在包装纸的底部。

当你在一个容器内浮动div时，它们被从流中取出，导致容器的自动高度不准确，这就是clear:both;发挥作用的地方。

Here 是一个更新的jsfiddle，其中包含已修复已应用的内容， here's 是一个非常棒的教程，可让您走上正确的道路。< / p>

快乐的编码。

Answer 3

我只是改变了位置：相对于页脚并移动了

<div id="footer">Coded by: me</div>

低于内容..

http://jsfiddle.net/QALze/7/

Answer 4

好吧，我不想因为别人的工作而受到赞誉，但如果有更多的答案不断出现，继续展示普遍接受的解决方案，我的眼睛就会流行起来。

来源：Ryan Fait's HTML5 CSS Sticky Footer

HTML：

<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <footer>
        <p>Copyright (c) 2008</p>
    </footer>
</body>

CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 155px; /* '.push' must be the same height as 'footer' */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

正如我在对OP的评论中所说，我不是该技术的忠实粉丝，因为它需要一个虚拟div，但.push div的要点是匹配页脚的高度所以主要div中的内容不会在页脚后面，因此对用户隐藏，但仍然可以在窗口中看到，这可能是一种严重的痛苦。

如何在CSS中创建页脚

4 个答案: