0

I am building a responsive page with bootstrap 4 which has a heading/title section with an image of the client's logo, their name and a navbar. All these elements are responsive, i.e. the image shrinks according to screen size and the navbar minimizes on small screens.

Now I would like to have the body also in a responsive way. i.e.: fill the remaining height of the screen with content, use a scrollbar to display all the content if necessary.
But for some reason I cannot figure out how to span the remaining part of the page over the whole height. It is either too large on some larger screens, when it fits perfectly for mobile devices, or it fits perfectly on large screens, but has only half the height it should have on mobile devices.

The page is roughly build with this 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>

I created a plunkr which actually shows the whole page:
https://plnkr.co/edit/GQHoephQyx3hoejgkT4k?p=preview

What is the correct way, with bootstrap 4.0, to display the page as desired, i.e. use the full remaining height which is left when the image shrinks/grows depending on screen size?

EDIT for clarification:
The content itself should have a scrollbar, but not the whole page. I.e. the header with the image and the menu bar should always stay visible, while the content which comes afterwards should have a scrollbar, if necessary.

M0rgenstern
  • 411
  • 1
  • 6
  • 18
  • **Please answer:** Why is the code referencing Bootstrap 3 if you want to use Bootstrap 4? – Carol Skelly Mar 24 '18 at 12:33
  • You are right. I'm sorry. Fixed that here and in Plunkr example. I downloaded the files to include them locally, therefore I had to replace the includes with the ones online and I used the wrong urls. The actual problem of the question still applies. – M0rgenstern Mar 25 '18 at 06:43

1 Answers1

1

Instead of setting defined heights, use flexbox to make the content area fill the height of it's parent container (which in this case is the body).

body {
    display:flex;
    flex-direction:column;
}

.flex-fill {
    flex: 1 1 auto;
}

.flex-shrink {
    flex-shrink: 0;
}

https://codeply.com/go/fKNRvG0Hak

Note: The flex-fill utility class will be included in the next Bootstrap 4.2 release: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

Similar questions:
Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap 4 page wide header bar above navbar

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • I am sorry, it seems my question is not stated correctly. I will edit the question. The scroll bar should be there for the content only, not the header or the menu. I.e. the header and the menu should stay at the top of the page and always be visible. – M0rgenstern Mar 25 '18 at 18:01
  • It can still be done with flexbox as explained. Look at the other similar questions I posted, and this answer: https://stackoverflow.com/questions/48703632/bootstrap-4-page-wide-header-bar-above-navbar/48706856#48706856 – Carol Skelly Mar 25 '18 at 20:31
  • Great, got it. Thank you very much. – M0rgenstern Mar 30 '18 at 05:30