I've been struggling for hours to achieve this layout: Check out the code example here
html,
body {
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
.MyNavbar {
height: 30px;
background-color: red;
}
.Main {
height: -webkit-calc(100% - 30px);
height: -moz-calc(100% - 30px);
height: calc(100% - 30px);
}
.Main:after {
content: "";
display: table;
clear: both;
}
.Sidebar {
height: 100%;
width: 10%;
float: left;
background-color: yellow;
}
.Content {
height: 90%;
width: 90%;
background-color: #e8e8e8;
float: left;
}
.ContentHeader {
height: 30px;
width: 100%;
background-color: blue;
}
.ContentData {
background-color: lightblue;
/*margin-top: 10px;*/
height: calc(100% - 30px);
overflow-y: scroll;
}<!DOCTYPE html>
<html>
<body>
<script src="src/index.js"></script>
<div style="height: 100vh;">
<div class="MyNavbar">myNavbar</div>
<div class="Main">
<div class="Sidebar">
Sidebar
</div>
<div class="Content">
<div class="ContentHeader">
ContentHeader
</div>
<div class="ContentData">
ContentData<br /><br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
...
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<h3>End of ContentData</h3>
</div>
</div>
</div>
</div>
</body>
</html>I've been facing some issues: - The scrollbar in the ContentData section is not working, it remains greyed out. - If I remove the "Lorem Ipsum" content, the ContentData section does not occupy the desired height to fill the display size.
Any guidance on how to solve these problems would be greatly appreciated. Thank you!