Я пытаюсь создать таблицу, которая использует flexbox, чтобы заполнить оставшуюся область экрана. Я хотел бы, чтобы таблица поддерживала липкие заголовки и вертикальную / горизонтальную прокрутку в дополнение к поддержке динамической высоты c.
Я успешно реализовал варианты, которые поддерживали различные комбинации этих требований, но всегда сталкивались с проблемой, будь то обрезание фонов, потому что они расширяются только до области просмотра или полос прокрутки, которые не отображаются при использовании динамической c высоты.
Я предоставил ссылку на скрипку вместе с некоторым примером кода: https://jsfiddle.net/26trpsuw/
Разметка:
<div class="page-container">
<div class="page-header">
<h2>Page Title</h2>
</div>
<div class="page-content">
<div class="sidebar"></div>
<div class="content">
<div class="table">
<div class="table-head">
<div class="table-row">
<div class="table-cell">Head</div>
<div class="table-cell">Head</div>
<div class="table-cell">Head</div>
<div class="table-cell">Head</div>
<div class="table-cell">Head</div>
<div class="table-cell">Head</div>
<div class="table-cell">Head</div>
<div class="table-cell">Head</div>
<div class="table-cell">Head</div>
<div class="table-cell">Head</div>
</div>
</div>
<div class="table-body">
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
<div class="table-row">
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
<div class="table-cell">Cell</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: Helvetica, sans-serif;
margin: 0;
}
.page {
&-container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
&-header {
background: #eee;
margin-bottom: 10px;
h2 {
font-size: 18px;
margin: 0;
padding: 20px;
}
}
&-content {
display: flex;
height: 100%;
.sidebar {
background: #eee;
flex: 0 0 150px;
height: 100%;
padding: 20px;
}
.content {
background: #eee;
height: 100%;
flex: 1;
margin-left: 10px;
}
}
}
.table {
width: 100%;
&-head {
background: #666;
color: #fff;
}
&-body {
overflow: auto;
}
&-row {
display: flex;
}
&-cell {
flex: 1 0 50px;
padding: 5px 10px;
}
}