Question

我所遇到的似乎是一个简单的问题，但我不能只为解决这个问题。我已经四处搜寻，但是对类似问题的所有修复均无济于事，这就是为什么我在这里寻求帮助。

我正在构建一个页面，其中多个部分相互堆叠。每个部分都设置为占据视口的整个高度，除了一个部分以外的所有部分都被设置为占用屏幕的100％宽度。

但是，当我减小屏幕高度时，这些部分会相互重叠。我试图将每个部分的溢出都设置为隐藏，但仍会得到相同的行为。我想要的是，随着浏览器高度的减小，每个部分都应具有固定的高度，而不会被压入上部。下面是我的代码段。

body{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.introd{
    height: 100vh;
    width: 100%;
    padding: 3rem 4rem;
    overflow: hidden;
}

<section class="introd">
    <div class="introd_wrapper">
        <h2 class="text-center">Introduction</h2>
        <div class="contents">
            some contents here
        </div>
    </div>
</section>

Answer 1

那是因为.section元素的填充。为避免将填充加到元素的宽度和高度上，可以将其box-sizing属性设置为border-box，如下所示：

.section{
    height: 100vh;
    width: 100%;
    padding: 3rem 4rem;
    box-sizing: border-box;
}

此外，您不需要为主体设置样式即可使其伸展，因为每个元素都已经设置了宽度和高度。

如何防止一个部分与另一部分重叠

1 个答案: