Я использую сетку bootstrap 4, чтобы создать electron layout, и удачу, чтобы создать то, что я хочу, но у меня проблема, когда я заполняю каждую сетку данными, это получается грязно.
Я использую этот подход для создания layout:
Установить высоту div, равную размеру экрана
То, что я хочу, выглядит следующим образом:
Вот то, что я получаю с моим кодом :
Но если я укажу больше данных, это будет выглядеть так:
Это мой код :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.full-height {
height: 100vh;
overflow: auto;
}
</style>
<title>Test 123</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 1</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<h2>Section title 2</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-4 bg-light full-height">
<h2>Section title3</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-5 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 4</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<video width="95%" height="95%" controls><source src="video.mp4" type="video/mp4"></video>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="renderer.js"></script>
</html>
Можно ли сделать каждую сетку похожей на сам контейнер, которая имеет свою область?