如何使 100% 的高度在滚动的固定位置标题中按预期表现？答案

【问题标题】：How to make 100% height behave as expected within a scrolling, fixed position header?如何使 100% 的高度在滚动的固定位置标题中按预期表现？
【发布时间】：2017-04-18 22:14:36
【问题描述】：

我正在尝试为网站构建响应式标题组件。标题有position: fixed，所以它不会滚动，但包含一个水平滚动的选项列表。

我使用this tutorial 构建了水平滚动的内部结构，以便可以滚动标题项列表但不会显示滚动条。查看下面的代码，看看它在 fiddle 中的工作情况。

HTML

<body>
    <main class="fixed-container">
        <div class="scroll-container">
            <ul class="scroll-list">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </div>
    </main>
</body>

CSS

.fixed-container {
  position: fixed;
  height: 75px;
  overflow: hidden;
  right: 0;
  left: 0;
  border-bottom: 2px solid black;
}
.scroll-container {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: content-box;
  padding-bottom: 17px;
}
.scroll-list {
  list-style: none;
  display: flex;
  height: 100%;
  width: 1000px;
  margin: 0;
  padding-left: 0;
}
.scroll-list li {
  flex: 1 0;
  text-align: center;
  padding-top: 2em;
  border-bottom: 2px solid red;
  margin-left: 5px;
  margin-right: 5px;
}

<div class="scroll-container">，与height: 100%，按预期填充<main class="fixed-container"> 的高度。然而，div 中的<ul> 也有height: 100%，并没有填充其父级的高度。 <li>s 底部的红色边框和<main class="fixed-container"> 底部的黑色边框之间有空格。

请注意，如果从 <div class="scroll-container"> 中删除了 overflow-x: auto 和 overflow-y: hidden，或者如果从 <main class="fixed-container"> 中删除了 right: 0，则高度的行为符合预期，并且红色边框与顶部齐平黑色边框。

如何让<ul> 适合其父级的高度，以便红色边框直接位于黑色边框的顶部？

【问题讨论】：

overflow-x: overlay;怎么样
奇怪的行为。看来差距是由于浏览器为滚动条轨道从overflow 上的.scroll-container 规则腾出空间造成的。
overflow: overlay 不在规范中。我不会依赖它。 w3.org/TR/CSS22/visufx.html#overflow
请在问题本身的minimal reproducible example 中提供所有相关代码，而不仅仅是在第三方网站上。
谢谢，@MikeMcCaughan！我已将相关代码添加到问题中。

标签： html css scroll flexbox

【解决方案1】：

您可以通过像这样更改.scroll-container 规则来达到预期的效果，而不是设置底部填充，而是增加它的高度

.scroll-container {
  height: calc(100% + 17px);
  overflow-x: auto;
  overflow-y: hidden;
}

.fixed-container {
  position: fixed;
  height: 75px;
  overflow: hidden;
  right: 0;
  left: 0;
  border-bottom: 2px solid black;
}
.scroll-container {
  height: calc(100% + 17px);
  overflow-x: auto;
  overflow-y: hidden;
}
.scroll-list {
  list-style: none;
  display: flex;
  height: 100%;
  width: 1000px;
  margin: 0;
  padding-left: 0;
}
.scroll-list li {
  flex: 1 0;
  text-align: center;
  padding-top: 2em;
  border-bottom: 2px solid red;
  margin-left: 5px;
  margin-right: 5px;
}

	<main class="fixed-container">
		<div class="scroll-container">
			<ul class="scroll-list">
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
			</ul>
		</div>
	</main>

【讨论】：

谢谢，LGSon，这确实有效！我将坚持希望另一个解决方案可以解释这个问题并提出一个不涉及实验性 CSS 技术的解决方案，但非常感谢您的帮助。
@jesse501 好吧，CSS Calc 不是实验性，它会停止工作，所以不用担心。它从 IE9 开始就存在，并且比您使用的 flexbox 具有更好的浏览器支持，因此您很可能无法获得更好的问题解决方案
@jesse501 让我知道我的回答是否有效或有帮助，是否可以被接受和/或投票，否则我将其删除。