【发布时间】：2018-08-12 07:56:57
【问题描述】：
我有一个带有固定顶部标题、固定左侧边栏和可滚动右侧内容区域的布局。内容包括一个长表，我想在粘性标题下方滚动。
我创建了一个单独的表格，只是为了标题，在我添加任何固定位置的样式之前，一切都很好。当我放置位置固定时，标题会粘住但它会延伸到屏幕外（可能是由于侧边栏的偏移？）有没有办法让它像表格本身一样延伸到屏幕的整个宽度？这是小提琴，我对导致 CSS 出现问题的行有一个评论：
https://jsfiddle.net/7wgnosr1/14/
body,
html {
height: 100%;
min-height: 100%;
margin: 0;
}
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
z-index: 0;
flex: 0 64px;
display: flex;
background: #f4991a;
}
main {
flex: 1;
display: flex;
background: #f9f5f0;
overflow: auto;
}
aside {
background: #f2ead3;
flex: 0 0 300px;
overflow: auto;
order: 0;
border-right: 1px solid #d9d9d9;
display: flex;
flex-direction: column;
}
section {
background: #f3f3f5;
flex: 1 1 100px;
order: 1;
overflow: auto;
}
table.fixed {
position: fixed;
/* If I comment this out, it aligns correctly but does not stick */
}
table {
text-align: left;
width: 100%;
padding: 10px;
background-color: white;
}<div class="container">
<header>
Fixed Header
</header>
<main>
<aside>
Fixed Sidebar
</aside>
<section>
<table class="fixed">
<thead>
<tr>
<th>Fixed TH 1</th>
<th>Fixed TH 2</th>
<th>Fixed TH 3</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</section>
</main>
</div><table class="fixed"> // with position fixed, it sticks but extends off the screen
<thead>
<tr>
<th>Fixed TH 1</th>
<th>Fixed TH 2</th>
<th>Fixed TH 3</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
... lots more rows
</tbody>
</table>
【问题讨论】：
-
注意，在您当前的示例中，第二个表中的第一行是不可见的。
-
我查看了 position:sticky 但不幸的是它不适用于我的 Chrome (63) 版本。可悲的是，我不能指望 chrome 无法处理的东西
-
看看我关于
position: sticky的更新答案 -
你确定你测试了正确的小提琴吗？ jsfiddle.net/7wgnosr1/34 并且还注意到顶部坐标和位置：相对添加到父级？
标签： html css html-table flexbox overflow