Отлично, понял. Большое спасибо.

даю адаптивную страницу с начальной загрузкой 4, которая имеет раздел заголовка / заголовка с изображением логотипа клиента, его имени и навигационной панели. Все эти элементы являются адаптивными, то есть изображение сжимается в соответствии с размером экрана, а панель навигации минимизируется на маленьких экранах.

Теперь я хотел бы, чтобы тело также было отзывчивым. напр., заполните оставшуюся высоту экрана содержимым, используйте полосу прокрутки для отображения всего содержимого, если это необходимо.
Но по какой-то причине я не могу понять, как растянуть оставшуюся часть страницы по всей высоте. Он либо слишком велик на некоторых больших экранах, когда он идеально подходит для мобильных устройств, либо идеально подходит для больших экранов, но имеет только половину высоты, которую он должен иметь на мобильных устройствах.

Страница примерно построена с такой структурой:

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

Я создал plunkr, который фактически показывает всю страницу:
https://plnkr.co/edit/GQHoephQyx3hoejgkT4k?p=preview

Как правильно при начальной загрузке 4.0 отображать страницу по своему усмотрению, то есть использовать полную оставшуюся высоту, которая остается, когда изображение уменьшается или увеличивается в зависимости от размера экрана?

РЕДАКТИРОВАТЬ в целях разъяснения:
Сам контент должен иметь полосу прокрутки, но не всю страницу. То есть заголовок с изображением и строка меню всегда должны оставаться видимыми, в то время как содержимое, которое появляется после, должно иметь полосу прокрутки, если это необходимо.

Ответы на вопрос(1)

Ваш ответ на вопрос