htmlcssbootstrap-5mdbootstrap

Overflow auto for content inside of a page

As you can see in the image I don't want my page to be scrollable. From My research I found that I should set the height to 100vh (How to make a div 100% height of the browser window). Now I set all the big content like elements 4 & 5 to overflow:auto. But for some reason there's no scrollbar and the content is bigger then the screen height.

I kept researching and found this answer: Make a div fill the height of the remaining screen space

Following the answer still didn't solve my problem. I use mdbootstrap in my project so maybe it's causing problems.

My question is how can I achieve this (without using immediate values like 100px):

enter image description here

Example snippet that doesn't work as I expect:

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.row {
  border: 1px dotted grey;
}

.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
  background-color:grey;
}

.content {
  flex: 1 1 auto;
  background-color:#C4C4C4;
}

.scrollableContent {
  flex: 1 1 auto;
  background-color:#7D7D7D;
  overflow: auto;
  margin:5px;
}

.item {
  background-color:black;
  color:white;
  margin:5px;
}

.footer {
  flex: 0 1 40px;
  background-color:grey;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <b>Navigation Bar</b>
  </div>
  <div class="row content">
    <div class="item">
      Some Content
    </div>
    <div class="item">
      Some Content
    </div>
    <div class="item">
      Some Content
    </div>
    <div class="row scrollableContent">
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
    </div>
    
  </div>
  <div class="row footer">
    <b>Footer</b>
  </div>
</div>

The Long Content should be scrollable and the header and footer should be stationary.

Edit: I noticed that setting the height of .scrollableContent to a value like 200px does achieve what I want in a way. Only that I want it to be as big as it can fit.

Solution

  • as I understand it is like that:

    * {
    margin:0;
}
html {
    height:100%;
}
body {
    height:100%;
    display:flex;
    flex-direction:column;
}
.header {
    background:tomato;
    color:#fff;
    padding:10px;
}
.content {
    padding:10px;
    flex:1;
    max-height:calc(100% - 76px) /* 76 is header plus footer total*/;
    overflow-y:scroll;
}
.footer {
    background:dodgerblue;
    color:#fff;
    padding:10px;
}
    <!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    
    <link rel="stylesheet" href="style.css" />
</head>
<style type="text/css">

</style>
<body>
    <header class="header">Header</header>
    <main class="content">Content
      <div class="scrollableContent">
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
    </div>
    </main>
    <footer class="footer">Footer</footer>
</body>
</html>