Currently, I am in the process of constructing a dynamic webpage using Bootstrap 4. This page includes a header section with the client's logo, their name, and a responsive navbar. The challenge lies in making these elements adapt to various screen sizes seamlessly - the image should resize accordingly, and the navbar should collapse on smaller screens.
Next, I aim to make the body of the page responsive as well. Essentially, I want it to occupy the remaining height of the screen, utilizing a scrollbar when needed to display all content.
Despite my efforts, I'm struggling to span this section over the entire height of the page effectively. It either appears too large on larger screens, fits well on mobile devices but not on larger screens, or has inadequate height on mobile devices despite looking fine on large screens.
This is an outline of the webpage structure:
<!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>
To see the complete webpage, you can check out this Plunker link:
https://plnkr.co/edit/GQHoephQyx3hoejgkT4k?p=preview
What would be the appropriate approach using Bootstrap 4.0 to achieve the desired design, ensuring that the content adapts to the available space once the image adjusts based on the screen size?
EDIT for clarification:
The main requirement is for the content itself to possess a scrollbar when necessary, rather than scrolling the entire page. Thus, the header displaying the image and menu bar should always remain visible, while the subsequent content area should contain a scroll feature for vertical navigation.