我正在尝试为网站构建响应式标头组件。标题为position: fixed，因此它不会滚动，但包含水平滚动的选项列表。
我使用this tutorial构建水平滚动内部，以便可以滚动标题项列表，但不会显示滚动条。请查看下面的代码，看看它是否适用于此fiddle。
<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>
.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>底部的红色边框与<main class="fixed-container">底部的黑色边框之间有空格。
请注意，如果从overflow-x: auto移除了overflow-y: hidden和<div class="scroll-container">，或者从right: 0移除<main class="fixed-container">，那么高度就会如预期一样并且红色边框与黑色边框的顶部齐平。
如何让<ul>适合其父级的高度，以便红色边框直接位于黑色边框的顶部？
答案 0 :(得分：0)
您可以通过更改此类.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>