2

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

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

jsfiddle

HTML 代码： 

<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;，但没有成功。

很难向你寻求帮助，因为可能真的很简单，但我试过了，试过了，不知道该怎么做。

4

4 回答 4

5

在 html 中删除position: absolute;和移动下面的页脚怎么样？content

修改代码

于 2013-09-16T13:06:10.120 回答
1

这里有一些指针，您需要设置底部、顶部、左侧或右侧来定位绝对元素。

此外，将它们包装在容器/包装器中并给它一个相对位置，这样绝对定位的元素不会最终出现在奇怪的位置，相对位置会强制它到包装器的尺寸，bottom:0;使其粘在包装器的底部.

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

这是一个更新的 jsfiddle，应用了固定，这是一个很棒的教程，可以让你走上正确的道路。

快乐编码。

于 2013-09-16T13:08:27.057 回答
0

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

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

以下内容..

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

于 2013-09-16T13:11:14.320 回答
0

好吧，我不想把别人的工作归功于别人，但如果更多的答案不断出现，不断展示普遍接受的解决方案，我的眼睛会弹出。

来源： Ryan Fait 的 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，但.pushdiv 的重点是匹配页脚的高度，以便主 div 中的内容不会浸在页脚后面，因此对用户隐藏，但对窗口仍然可见，这可能是一个严重的痛苦。

于 2013-09-16T13:20:52.610 回答