When looking at the image, it is clear that I do not want my page to be scrollable. Researching the issue, I discovered that setting the height to 100vh is the solution (How to make a div 100% height of the browser window). I then set elements like 4 and 5 to overflow:auto, but unfortunately, there is no scrollbar and the content exceeds the screen height.
Continuing my research, I came across this answer: Make a div fill the height of the remaining screen space
Even following that answer did not resolve my issue. It is possible that using mdbootstrap in my project is causing complications.
My inquiry is how I can achieve the desired layout without using specific values such as 100px:
https://i.sstatic.net/Ik9kN.png
Below is an example snippet that is not functioning as expected:
html,
body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.row {
border: 1px dotted grey;
}
.header {
flex: 0 1 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;
}<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...
</div>
</div>
<div class="row footer">
<b>Footer</b>
</div>
</div>The Long Content should be scrollable while the header and footer remain fixed in position.
Edit:
I have noticed that setting the height of .scrollableContent to a specific value like 200px does achieve the desired effect in some capacity. However, I aim for it to adjust dynamically to fit the available space.