10

I want a page with sticky footer which's scrollbar does not overlap header, only body. Like I do in this fiddle. But now i want that content (dotted box) has 100% height of body.

html 

<div class="navbar navbar-inverse navbar-fixed-top"></div>
<div class="container">
   <div class="content-container">
      <div class="my_content">Full height ??</div>
      <div class="push"></div>
   </div>
   <div class="footer"></div>
</div>

css

html,
    body {
        height: 100%;
        overflow: hidden;
    }

    body {
        padding-top: 50px;
    }

    .container {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
    }

    .content-container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        padding-top: 15px;
        padding-bottom: 15px;
        min-height: 100%;
        margin-bottom: -60px;
    }

    .footer {
        position: relative;
        width: 100%;
        background-color: red;
    }

    .footer,
    .push {
        height: 60px;
    }

    .my_content {
        border: 1px dotted;
        width: 100%;
        height: 100%;
        min-height: 200px;
        min-width: 300px;
    }

You can suggest any other template for using sticky footer.

Adrian Enriquez
  • 8,175
  • 7
  • 45
  • 64
user3714967
  • 1,575
  • 3
  • 14
  • 29

2 Answers2

13

You can set .my_content to 100% of the viewport height minus the height and (vertical) padding of the other elements (i.e. header height, footer height, top and bottom padding on .content-container) on your page like so:

.my_content {
  min-height: calc(100vh - 140px);
}

DEMO

If your header and footer have variable heights, this won't work though.

Jayx
  • 3,896
  • 3
  • 27
  • 37
-2

use this example for sticky footer it does not overlap header

http://jsfiddle.net/0dbg9ko2/12/

.footer {
position: fixed;
bottom:0;
left:0;
background-color: red;
}

and i can some changes in html

RAJ
  • 542
  • 3
  • 8
  • scrolbar is under footer when it appers – user3714967 Mar 11 '15 at 07:28
  • no, I don't want fixed footer. I would like footer like in my fiddle. I only want to have content 100% height of body – user3714967 Mar 11 '15 at 07:48
  • Yes, while this answer provides a solution with a footer stuck to the bottom of the viewport, it does not deal with the requirement for content with 100% height whatsoever. – Luke Oct 27 '16 at 00:25