Question

我想要这个部分（demo HERE）

<div class="row">
     <div class="hundred">Hello</div>
</div>

一直到底。

我已经尝试过清除，唯一可行的是margin-top，其疯狂的px数量为500px +。否则它甚至不会移动。有人可以解释为什么会发生这种情况吗？

编辑：在代码中，我需要帮助的部分就是这个

 <div class="row" style="position: relative; margin-top: 625px">
       <div class="hundred">Hello</div>
    </div>

如果你拿出margin-top: 625px这个div上升了 - 如何在没有设置margin-top这么疯狂的情况下让它停留？

我不是在寻找一个页脚家伙 - 这些盒子用于另一个目的 - 我只是想基本上做另一行 - 没有底部与前一行重叠。

Answer 1

这是一个难题，因为没有“底层”这样的东西。网页无限高。

唯一可靠的方法是使用JavaScript，尤其是在触摸屏浏览器上。

相反，您应该尝试设计您的页面，这样您就不需要在屏幕底部放置一些内容。

Answer 2

你可以简单地添加一个clear：both和overflow：hidden到.row选择器。如果你想要它在底部，那么你必须使用position：absolute;底部：0

Answer 3

以下css将始终保持页脚底部。在您的情况下，增加container的高度。

margin-top工作的原因是你超出了指定的高度。

<div class="row" id="footer">
       <div class="hundred">Hello</div>
</div>

为方便起见，我使用了id选择器。

#footer {
    position: absolute;
    bottom: 0;
    width:100%;
}

JSBin中的

Updated fiddle以供参考。希望你明白。

Answer 4

您可以通过将内容和底部部分包含在两个div中来完成，例如

<强> HTML

  <div id="wrap">
    <div class="container">    
      <div class="row">
        <div class="hundred"></div>
      </div>
    </div>     
  </div>
  <div id="bottom">
    <div class="container">
      <div class="row">
        <div class="hundred">Hello</div>
      </div>
    </div>
  </div>

css （ chnages ）

html {
    height:100%;
}
body {
    color: white;
    text-align: center;
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -150px;
}

DEMO

希望这有帮助

无法从一行到另一行

4 个答案: