1

I am very new to HTML, CSS and angular.

I am trying to create an angular app and where I have three main div on the screen 1. header 2. content 3. footer

The idea is page should be fixed and cannot be scroll. Header and footer always stick to top and bottom. the middle part is content which is scroll-able only. contents should not be overlapped by header and footer. Layout should work with different type of devices and screen.

Here is the fiddle for the same but it is overlapping conents.

JS Fiddle

I achieve it with fixed size of screen but not with different size.

here is my another 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>

Can anyone help me with this.

Akshay Mulgavkar
  • 1,727
  • 9
  • 22
Abhash786
  • 881
  • 2
  • 24
  • 53
  • 1
    Here's a very similar problem. You have 4 different approaches there - I think you can use some of those approaches. https://stackoverflow.com/questions/37887589/sticky-header-and-footer-scrollable-content – Hunor Jul 11 '19 at 05:17
  • 1
    Rather that height 91% which is never going to be accurate use a flexbox and have the content div fill the remainder after the header and the footer are fix sizes. – Adrian Brand Jul 11 '19 at 05:42
  • 1
    This might give you some ideas https://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex – Adrian Brand Jul 11 '19 at 05:43
  • 1
    Thanks a lot guys.... these all options work like charm... thanks again – Abhash786 Jul 11 '19 at 05:57

2 Answers2

2

What you need in the main content div is to give it the dynamic height using pattern like this:

height : calc( 100vh - (headerHeight + footerHeight))

So it height scale with the view height of the browser, and give it overlow-y:auto then when the content exceed it height it become srollable :

nav{
 height:20vh;
 /*Or fixed pixel unit*/
 background-color: green;
}
footer{
 height:20vh;
 /*Or fixed pixel unit*/
 background-color: black;
}
section {
  height: calc(80vh);
  /* - Height: calc(100vh - (navheight + footer))
     - Over flow y make the dive scrollable 
  when it exceed the fixed height*/
  overflow-y: auto;
  transition: all 0.5s;
  background-color: yellow;
}
<nav></nav>
<section>
 Main content will be scrollable if it contain exceed the fixed   height
</section>
<footer></footer>
Ethan Vu
  • 2,911
  • 9
  • 25
1

You may also like to try Bootstrap Navbar. It provides all required css styles.

nitoloz
  • 165
  • 1
  • 16