I can not that the fur was at the bottom of the page when a stub appeared ... Example here JSFIDDLE

html:

<body> <div class="cap"> cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br> </div> <div class="page">page</div> <div class="footer">footer</div> </body>

css:

 html, body { height: 100%; } .cap { position: absolute; } .page { height: auto; min-height: 100%; padding-bottom: 50px; background-color: #ccc; text-align: center; } .footer { height: 50px; margin-top: -50px; background-color: #bbb; text-align: center; }

If you scroll down the page, then .cap climbs over the side of the footer (and you also need the footer to be at the bottom of the page), .cap should be on top of the page ...

  • one
    After all, you have the .cap position assigned to position: absolute and it will simply go to the next so-called layer, and will be on top of other blocks ...) And this also prevents your footer. Try a fixed position or something ... - E1mir
  • @KryTer_NexT content that will be loaded into .cap can be larger than the page size, I can do it with .cap, but I mean, there are no options for sss? - bsbak
  • You can make a so-called 'rubber footer, just when adding content, the footer went down along with the content, and in css: postion: absolute to remove and make a separate block element, this position: absolute terrible thing, it’s difficult to work with, especially if you make up site not only for the screen with one resolution .. - E1mir
  • Possible duplicate question: As in an adaptive site with a variable height of the footer, nail it to the bottom of the page - Vadizar
  • Possible duplicate question: How to press the footer always to the bottom of the screen? - Vadizar

1 answer 1

 *{ margin:0; padding:0; } .header,.footer{ width:90%; margin:3px auto; background:rgba(200,200,200,.4); } .header{ height:120px; } .footer{ height:140px; } .clear{ display:block; clear:both; } .clear:after{ content:""; display:block; clear:both; } .main{ width:90%; margin:3px auto; } .aside,.article{ float:left; box-sizing:border-box; background:rgba(200,200,200,.4); } .aside{ width:30%; min-height:150px; } .article{ width:69%; min-height:200px; margin-left:1%; } 
 <div class="header"> header </div> <div class="main clear"> <div class="aside">aside</div> <div class="article">article</div> </div> <div class="footer">footer</div>

Well, actually the markup itself, as you can see, is not complicated, the basement itself turns out to be at the very bottom, that's all. Positioning in this case should not be used