html - 背景漂浮分开/相互重叠

Question

我正在尝试制作一个包含多个不同部分的着陆页，例如 chartbeat.com .我在我的 HTML 中完成了以下操作:

    <section class="payroll">
      <p>
        This is the Payroll Section
      </p>
    </section><!-- END class="payroll" -->  

    <section class="pos">
      <p>
        This is the Point of Sale Section
      </p>
    </section><!-- END class="pos" -->

这就是我的 CSS 的样子:

    .payroll {
    background-image: url('../img/payroll_bg.jpg');
    background-repeat: repeat-x;
    height: 100%;
}

.pos {
    background-image: url('../img/pos_bg.jpg');
    background-repeat: repeat-x;
    height: 100%;
}

问题是这些部分漂浮着，在它们之间留下了很大的差距。见图片。如果我缩小窗口或检查元素，这些部分会 float 并相互重叠。

有什么想法吗？谢谢!

Answer 1

我认为问题是由您的 100% 高度引起的。您需要在父元素上设置高度，因为任何百分比尺寸都基于它的大小。

摆脱百分比，就像您所做的那样，也可以达到目的。