Just starting out with HTML, CSS, and Angular here!
I'm attempting to build an Angular app with three main divs on the screen: 1. header 2. content 3. footer
The goal is to have a fixed page that cannot be scrolled. The header and footer should always stay at the top and bottom, respectively. The middle section (content) should be scrollable only. No overlapping of content by the header or footer. Responsive design that works across different devices and screens.
Check out this fiddle for an example, although it currently has content overlap:
I managed to achieve this layout with a fixed screen size but struggle with different sizes.
Here's another snippet of my code...
html {
height: 100%;
overflow: hidden;
}
body {
min-height: 100%;
}<body>
<app-root class="h-100 w-100 align-items-center"></app-root>
</body>.headerdiv {
margin-top: 0px;
height: 60px;
min-height: 60px;
}
.contentdiv {
position: relative;
overflow: scroll;
min-height: 91%;
}
.footerdiv {
position: relative;
overflow: hidden;
margin-bottom: 0px;
padding-bottom: 0px;
height: 20px;
min-height: 20px;
width: 100%;
background-color: darkblue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="headerdiv">
<app-hsbc-header-bar></app-hsbc-header-bar>
</div>
<div class="contentdiv">
<div>
<router-outlet></router-outlet>
</div>
</div>
<footer class="footerdiv">
<app-application-footer></app-application-footer>
</footer>Looking for some assistance on this! Thanks in advance.