所以我有垂直滚动捕捉部分，它们都是 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 或 a，它似乎不起作用专用的 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-child 部分的高度。据我了解，div 在它们自己或类似的东西之后创建了一个空行。我不太明白。好吧，如果我将 div 更改为 font-size 0，则所有 h-child 部分的高度都相同，但是所有内容都是不可见的，因为所有 font-size 现在都是 0。
我还尝试将 .list 设置为 font-size 0 并且这也有效。所有部分的大小都合适。然后我将 16px 的字体大小添加到列表中的元素，而不是列表本身，并再次在每个部分的顶部添加空白区域。这让我感到困惑，这怎么可能。 .list 位于 h-child 部分内。为什么它会改变它的高度？!那应该不可能吧!我几乎对这种布局失去了所有希望。我想不通。
最佳答案
问题代码好像是这部分。 <h3>有属性(property)display:block这会导致您的页面出现奇怪的高度。您是否必须为允许您使用不同标签的中间部分重新设计布局容器。或者您可以简单地更改 <h3>标记给其他人，例如 <span>并为其分配文本字体和粗体。
<h3>Item 1</h3>
<h3>Item 2</h3>
关于html - 垂直滚动捕捉部分内的水平滚动捕捉部分，由于 ul 和 div 的原因，上方有空白空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59203354/