Bootstrap 4.0: encabezado receptivo con imagen + barra de navegación + cuerpo de altura completa
Estoy creando una página receptiva con bootstrap 4 que tiene una sección de título / título con una imagen del logotipo del cliente, su nombre y una barra de navegación. Todos estos elementos son receptivos, es decir, la imagen se reduce según el tamaño de la pantalla y la barra de navegación se minimiza en pantallas pequeñas.
Ahora me gustaría tener el cuerpo también de manera receptiva. es decir: llene la altura restante de la pantalla con contenido, use una barra de desplazamiento para mostrar todo el contenido si es necesario.
Pero por alguna razón no puedo entender cómo abarcar la parte restante de la página en toda la altura. Es demasiado grande en algunas pantallas más grandes, cuando se adapta perfectamente a dispositivos móviles, o se adapta perfectamente a pantallas grandes, pero tiene solo la mitad de la altura que debería tener en dispositivos móviles.
La página está construida aproximadamente con esta estructura:
<!DOCTYPE html>
<html lang="de" style="height:100%">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Client Name</title>
</head>
<body class="main" style="height:100%">
<div class="container">
<div class="text-center">
<!-- Client image goes here -->
<h1 style="display:inline;margin-left:0.6em;color:#8b7d7b">Client Name</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:#e0eee0">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainnavbar" aria-controls="mainnavbar" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="mainnavbar" class="navbar-collapse collapse justify-content-md-center">
<ul class="navbar-nav">
<li class="nav-item nav-link active">Page A</li>
</ul>
</div>
</nav>
<div class="container" style="height:70vh">
<div class="row" style="height:100%">
<!-- Main body of page -->
<div class="col-sm-1 col-md-9" style="height:100%">
<p class="col-scrol">
<!-- Main part of the page. Content should have full height and scroll vertically if necessary -->
</p>
</div>
<!-- Comment section (scrolling) -->
<div class="d-none d-md-block col-md-3 comment-section">
<!-- Comment section at the left hand side of the page -->
</div>
</div>
</div>
</body>
</html>
Creé un plunkr que en realidad muestra toda la página:
https://plnkr.co/edit/GQHoephQyx3hoejgkT4k?p=preview
¿Cuál es la forma correcta, con bootstrap 4.0, de mostrar la página como se desea, es decir, usar la altura restante total que queda cuando la imagen se encoge / crece dependiendo del tamaño de la pantalla?
EDITAR para aclaraciones:
El contenido en sí debe tener una barra de desplazamiento, pero no toda la página. Es decir. el encabezado con la imagen y la barra de menú siempre deben permanecer visibles, mientras que el contenido que viene después debe tener una barra de desplazamiento, si es necesario.