CSS Footer glued to the bottom of the page

0
votes

i try to create div footer, but have problem.

I have few div blocks located one by one inside container. Container have 100% height. Inside Container First Div have 100px height (header). Second Div (Mainbody) need to have all height up to site bottom (bootom part of screen size) or more.

Third Div have absolute position and located on bottom. But summary height of Container Div is more than 100% because i see scroll on right part of page. How to resolve this?

Page with css: height:100% takes more than 100% 

html, body {
  height: 100%;
  margin:0;
  padding:0;
  background-color: yellow;
}

.container {
  position:relative;
  min-height:100%;
  background-color: green;
}

.header {
  background-color: blue;
  height: 100px;
}

.mainbody {
  background-color: gray;
  height: 100px;
}

.footer {
   position:absolute;
   bottom:0;
   width: 100%;
   background-color: red;
}
<body>
  <div class="container">
    <div class="header">
      <p>
      header
      </p>
    </div>
    <div class="mainbody">
      <p>
      mainbody
      </p>
    </div>
    <div class="footer">
      <p>
      footer
      </p>
    </div>
  </div>
</body>
3
htmlcss
Have you tried position:fixed for the footer? – Richard Ev
This sounds like you want the footer glued to the bottom of the page? If so Google sticky footer there's a few ways to do this – StudioTime

3 Answers

0
votes

Open with your browser. It doesn't show any scroll bars as shown in this snippet. Set 

.container{ height:100%}

rather than 

min-height:100%

as it will exceed the page full size.

0
votes

You might try position:fixed; bottom:0; left:0; right:0; height:somevalue; for the footer element, and for the body element, also add padding-bottom:somevalue(somevalue is the same value for body's padding-bottom and for footer's height)

0
votes

A dirty solution for your html margins. I've added a margin-top property to your html, body css. Now there is no scrollbar on the right.

It seems like margin: 0; has no effect on margin-top property. I've read online that some browsers tend to set margins by default on certain elements like body. I've given you a really dirty solution that may not work well with responsive design.

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    margin-top: -8px;
    background-color: yellow;
}