In order to have a responsive page, I use Bulma CSS column (based on CSS flexbox) which:
- Split my page on two equals width columns on desktop.
- Stack the two full width columns on mobile.
On the left column, I except to display a static map widget, using the screen full-height.
On the right column, I want to vertically split in two rows:
- The top row (in blue), containing few controls and having a dynamic height based on content.
- The bottom row (in red), containing table of data and having a dynamic height based on remaining space inside the screen.
The overall picture is to have a desktop webpage contained in the screen dimension.
My issue regards the bottom row height:
- If I set a fixed height using percentage, the row height is not optimal depending on the screen (a small unused space could remains underneath).
- if I do not set a fixed height, the row overflows from the screen (instead of adding a scroll bar inside the row).
Also I want to avoid, as much as possible, customisation, and maybe I could use some Bulma out-the-box layout: hero, tiles, ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
</head>
<body>
<div id="app" class="container is-fluid" style="height: 100vh;">
<div class="columns" style="height: 100%;">
<div class="column" style="background-color: green;">
<!-- Fixed full height zone -->
<div id="map" style="height: 100%;">
</div>
<div class="column">
<!-- Dynamic height zone depending on centent -->
<div class="container" style="background-color: blue;">
<p class="buttons is-right">
<button class="button">Button1</button>
<button class="button">Button2</button>
</p>
</div>
<!-- Dynamic height zone depending on remaining space inside the screen -->
<div class="table-container" style="overflow-y:scroll;" style="background-color: red;">
<table class="table is-fullwidth">
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
<tr><td>bla</td></tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>