我的布局具有固定的顶部标题、固定的左侧边栏和可滚动的右侧内容区域。内容包括一个长表格，我想将其滚动到粘性标题下方。
我只是为了标题目的创建了一个单独的表格，在向其中添加任何固定位置样式之前，一切都排列得很好。当我固定位置时，标题会粘住，但它会延伸到屏幕之外(可能是由于侧边栏的偏移？)有什么方法可以让它像表格本身一样延伸到屏幕的整个宽度？这是 fiddle ，我对导致 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>
最佳答案
实际上，一切正常，因为根据文档，固定元素是相对于浏览器窗口定位的，并且表格标题的宽度等于窗口的宽度。如果您的侧边栏始终具有固定宽度(例如 300px)，您可以为表格标题设置限制，如下所示:
table.fixed {
position: fixed;
max-width: calc(100% - 300px);
}
更新:正如评论中提到的position:sticky即将到来。谷歌浏览器 56+支持 th 元素和其他现代浏览器 already started to go in this direction 。你说它在 Chrome 63 上不适合你。你是否正确设置了阈值？仅设置 position: Sticky 是不够的:
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 {
text-align: left;
width: 100%;
background-color: white;
border-collapse: collapse;
}
th {
position: sticky;
top: 0;
background-color: #fff;
}
td, th {
padding: 5px;
}<div class="container">
<header>
Fixed Header
</header>
<main>
<aside>
Fixed Sidebar
</aside>
<section>
<table>
<thead>
<tr>
<th>Fixed TH 1</th>
<th>Fixed TH 2</th>
<th>Fixed TH 3</th>
</tr>
</thead>
<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>关于html - 固定位置表格标题超出屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49097296/