0

enter image description hereI am trying to create a Single page application.

html content:

<div class="containerDiv">
  <div class="headerDiv"></div>
  <div class="contentDiv"></div>
  <div class="footerDiv"></div>
</div>

All my application content will go inside contentDiv along with ng-view.

css content:

.containerDiv {
position: relative;
min-height: 100%;
background-color: beige;
}

.headerDiv {
height: 60px;
background: black;
width: 100%;
}

.contentDiv {
padding-bottom: 60px;
}

.footerDiv {
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-color: pink;
width: 100%;
height: 60px;
}

Everything works fine with non-positioned elements and footer stay at the bottom, when content height increases.

I want to add positioned elements(absolute or relative) in the contentDiv as per my requirements.

When height of my positioned element increases, it breaks my page as footer remains at same position and elements overrides it.

Suppose I want to add a table in contentDiv

<div class="data">
   <table>
   </table>
</div>

I want to align table at particular location in html.

.data{
 position:absolute/relative;
 top: 300px;
 left: 400px;
}

If height of the table increases, it will go out of the scope of footer. The height of the table is dynamic.

YogendraR
  • 2,144
  • 12
  • 17

1 Answers1

2

Not sure what you're trying to achieve here.
If you want to have your footer always sticked to the bottom of the page, like "floating" over your page content, you need to set the footerDiv's position to fixed in your CSS.

JsFiddle example for fixed position

If instead you want the footer to not overflow anything, you can set the position to relative, since it's already at the bottom of your container layout.

JsFiddle example for relative position

Applying the answer from the duplicated question to your case, here is yet another solution for a sticky footer, w/o making it fixed

JsFiddle example for sticky footer w/o fixed

Artem Rapoport
  • 186
  • 7
  • Please check this https://jsfiddle.net/Yogendra111/p9jn0dbe/14/ – YogendraR Apr 15 '18 at 16:09
  • I applied the answer from [the duplicated question](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) to your case. https://jsfiddle.net/p9jn0dbe/22/ – Artem Rapoport Apr 15 '18 at 17:44