Question

因此，我有所有100vh和100vw的垂直滚动捕捉部分。我原本打算单独出现页面。这些部分之一具有一个水平滚动部分，其概念与100vh和100vw部分相同。好吧，直到我添加ul标签，一切都可以正常工作。 div也一样。然后，水平部分的高度开始变化。它们仍将是页面宽度的100％，但高度会有所不同。滚动捕捉仍然有效。代码如下：

HTML

<body>
  <main>
    <section class="v-child">
      <h1>Section 1</h1>
    </section>

    <section class="v-child h-sect">
      <div class="h-child">
        <h2>Horizontal Section 1</h2>
        <ul class="list">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </div>

      <div class="h-child">
        <h2>Horizontal Section 2</h2>
        <ul class="list">
          <li>Thing 1</li>
          <li>Thing 2</li>
        </ul>
      </div>

      <div class="h-child">
        <h2>Horizontal Section 3</h2>
        <div class="list">
          <h3>Item 1</h3>
          <h3>Item 2</h3>
        </div>
      </div>
    </section>

    <section class="v-child">
      <h1>Section 3</h1>
    </section>
  </main>
</body>

CSS

顺便说一句，我将scroll-snap-type: y mandatory;定位到html容器的原因是因为如果您将body，main或专用div容器定位为目标，则它似乎不起作用。我认为这与当前问题无关，但我想提到它是因为我认为这是奇怪的行为。

html{
  scroll-snap-type: y mandatory;
}
body{
  margin: 0;
}
.v-child{
  scroll-snap-align: start;
  background: green;
  height: 100vh;
  width: 100vw;
}
h1{
  margin: 0;
}
.h-sect{
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.h-child{
  display: inline-block;
  scroll-snap-align: center;
  margin: 0;
  height: 100%;
  width: 100%;
  background: yellow;
}
.list{
  margin: 0;
}

我尝试给列表提供0的余量，我认为这没有什么关系，而且看起来并没有因为没有任何变化。以ul标签形式出现的列表和内部带有h3的div都似乎改变了h子部分的高度。根据我的理解，div在自己或类似的东西后创建一个空行。我不太明白。好吧，如果我将div更改为font-size 0，则所有h-child部分的高度都相同，但是所有内容都是不可见的，因为所有font-size现在都为0。

我也尝试将.list设置为font-size 0，这也起作用。所有部分都将是正确的大小。然后，我将16px的字体大小添加到列表中的项目，而不是列表本身，并在每个部分的顶部再次添加空白区域。这让我感到困惑，那怎么可能。 .list位于h-child部分中。为什么改变高度？那不可能！我几乎对这种布局失去了所有希望。我想不明白。

有关此活动的示例，您可以在“项目”部分中查看我的投资组合网站kudlanov.com（这是一项正在进行的工作）。我在那里有更多的元素和样式，但是我在上面的代码上进行了测试，以查明问题所在，并且似乎与.lists有关。

Answer 1

问题代码似乎就是这一部分。 <h3>具有属性display:block，该属性会导致您的页面出现奇怪的高度。是否必须为中间部分重新设计布局容器，以允许您使用不同的标签。或者，您可以简单地将<h3>标签更改为<span>之类的标签，并为其分配文本字体和粗体。

  <h3>Item 1</h3>
  <h3>Item 2</h3>

Answer 2

如果水平区域是使用flexbox制作的，那么一切都将神奇地开始工作。

将.h-sect样式更改为此：

.h-sect{
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}

和.h-child用于：

.h-child{
  scroll-snap-align: center;
  flex: 0 0 auto;
  margin: 0;
  height: 100%;
  width: 100%;
  background: yellow;
}

以这种方式执行所有元素，就像您期望它们一样。完全没有异常行为。

由于ul和div

HTML

CSS

2 个答案: