Question

任何想法为什么我的＆＃34;页脚顶栏＆＃34;尽管bottom: 200px;是页脚的高度，但是不会粘在页脚的顶部？谢谢见http://jsfiddle.net/9h5RW/

HTML

  <header></header>
  <h1>Headline</h1>
  <p class="blablatext">Blablabla blablabla baba bkabkabkaba</p>
  <footer class="clearfix">
    <footer class="footer-top-bar">footer top bar</footer>
    <footer class="footer-left">footer left</footer>
    <footer class="footer-middle">footer middle</footer>
    <footer class="footer-right">footer right</footer>
  </footer>

CSS：

body {
  background-color: rgb(255, 255, 255);
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(21, 84, 244);
}

h1 {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-top: 9px;
  padding-right: 9px;
  padding-bottom: 9px;
  padding-left: 9px;
  font-size: 37px;
  font-weight: 400;
  line-height: 1.38;
  text-align: center;
  color: rgb(0,0,0);
}

header {
  width: 100%;
  height: 600px;
  min-height: 300px;
  margin-right: auto;
  margin-left: auto;
  background: red;
}

.blablatext {
  margin-right: auto;
  margin-left: auto;
  padding-top: 14px;
  padding-right: 14px;
  padding-bottom: 14px;
  padding-left: 14px;
  font-weight: 400;
  line-height: 1.38;
  text-align: center;
  color: rgb(21, 84, 244);
}

.footer-left {
  float: left;
  width: 33.3333333333%;
  height: 200px;
  background-color: rgb(25, 193, 215);
}

.footer-middle {
  float: left;
  width: 33.3333333333%;
  height: 200px;
  background-color: rgba(164, 41, 41, 0.96);
}

.footer-right {
  float: left;
  width: 33.3333333333%;
  height: 200px;
  background-color: rgba(240, 45, 191, 0.96);
}

.footer-top-bar {
  position: absolute;
  bottom: 200px;
  left: 0;
  right: 0;
  z-index: 6;
  width: 100%;
  height: 37px;
  margin-right: auto;
  margin-left: auto;
  background-color: rgb(231, 86, 33);
}

Answer 1

使用不同的方法：

footer {
    position: relative; // so that top bar is pos. relative to footer element
}

.footer-top-bar {
    bottom: 0px;
}

http://jsfiddle.net/9h5RW/1/

Answer 2

从position: absolute;课程中删除bottom: 200px;和.footer-top-bar。 http://jsfiddle.net/9h5RW/4/

Answer 3

这是因为它的位置是相对于底部计算的。因此，请尝试使用bottom

，而不要使用top:0

jsfiddle

问题是将DIV放在页脚的顶部

3 个答案: