Micky Micky - 1 month ago 9
CSS Question

How to have two sections using 50% of the total height?

My goal is to have two sections, both containing a methodbar and table, which are using all the height available.

Any idea about how to modify the CSS?
I already tried playing with

height
and
100%
on
body
and
50%
on a custom tag but with no luck.

Here's a JSFiddle sample, including Bootstrap: JSFiddle




Code Snippet:


.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
html,
body {
padding: 0;
height: 100%;
}
/* Everything but the jumbotron gets side spacing for mobile first views */

.header,
.marketing,
.footer {
padding-left: 15px;
padding-right: 15px;
}
/* Custom page header */

.header {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
/* Make the masthead heading the same height as the navigation */

.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
padding-bottom: 19px;
}
/* Custom page footer */

.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */

.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
/* Supporting marketing content */

.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */

@media screen and (min-width: 768px) {
.container {
max-width: 730px;
}
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-left: 0;
padding-right: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
/* customizations */

.container-fluid {
height: 100%;
/*
padding-left: 0px;
padding-right: 0px;
*/
}
.collapsed {
display: none;
/* hide it for small displays */
}
@media (min-width: 992px) {
.collapsed {
display: block;
margin-left: -25%;
/* same width as sidebar */
}
}
#row-main {
overflow-x: hidden;
/* necessary to hide collapsed sidebar */
}
#content {
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
#sidebar {
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
transition: margin 0.3s ease;
}
.methodbar {} .sidebar-section {
height: 40%;
overflow: hidden;
}
.sidebar {
height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" id="row-main">
<div class="col-md-3 sidebar" id="sidebar">
<div class="row sidebar-section">
<div class="methodbar">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Delete</button>
</div>
<table class="row table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="row sidebar-section">
<div class="methodbar">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Delete</button>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>

</div>
<div class="col-md-9" id="content">

<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">
<img src="images/yeoman.png" alt="I'm Yeoman">
<br>Always a pleasure scaffolding your apps.</p>
<p><a class="btn btn-lg btn-success" ng-href="#/">Splendid!<span class="glyphicon glyphicon-ok"></span></a>
</p>
</div>
<div class="row marketing">
<h4>HTML5 Boilerplate</h4>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
<h4>Angular</h4>
<p>AngularJS is a toolset for building the framework most suited to your application development.</p>
<h4>Karma</h4>
<p>Spectacular Test Runner for JavaScript.</p>
</div>
</div>
</div>
</div>




Answer

Try the viewport measuring unit for height. Change the sidebar-section css to following:

.sidebar-section {
    height: 50vh;
    overflow: hidden;
}

100vh setting specifies that the height should take the full screen so we set the section to take 50vh so that the 2 sections will take the full viewable space. It is just like 100% only that it takes into account only the area that is visible on the screen based on whatever screen size it becomes.