Bootstrap 4.0 - cabeçalho responsivo com imagem + barra de navegação + corpo inteiro

Question

Mar 24, 2018, 08:17 AM

Bootstrap 4.0 - cabeçalho responsivo com imagem + barra de navegação + corpo inteiro

Estou construindo uma página responsiva com o bootstrap 4, que possui uma seção de cabeçalho / título com uma imagem do logotipo do cliente, seu nome e uma barra de navegação. Todos esses elementos são responsivos, ou seja, a imagem diminui de acordo com o tamanho da tela e a barra de navegação é minimizada em telas pequenas.

Agora eu gostaria de ter o corpo também de uma maneira responsiva. ou seja: preencha a altura restante da tela com conteúdo, use uma barra de rolagem para exibir todo o conteúdo, se necessário.
Mas, por alguma razão, não consigo descobrir como estender a parte restante da página em toda a altura. É muito grande em algumas telas maiores, quando se encaixa perfeitamente em dispositivos móveis, ou se encaixa perfeitamente em telas grandes, mas tem apenas metade da altura que deveria ter em dispositivos móveis.

A página é aproximadamente compilada com esta estrutura:

<!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>

Eu criei um plunkr que mostra a página inteira:
https://plnkr.co/edit/GQHoephQyx3hoejgkT4k?p=preview

Qual é a maneira correta, com o bootstrap 4.0, para exibir a página conforme desejado, ou seja, use a altura restante restante que resta quando a imagem diminui / cresce dependendo do tamanho da tela?

EDITAR para esclarecimento:
O conteúdo em si deve ter uma barra de rolagem, mas não a página inteira. I.e. o cabeçalho com a imagem e a barra de menus sempre deve ficar visível, enquanto o conteúdo que vem depois deve ter uma barra de rolagem, se necessário.