How to make a footer down the page
-
I can't have the faethur in the bottom of the page when the plug comes. ♪ ♪ Example. https://jsfiddle.net/oxhrh3wd/1/
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 roll down the page, then the .cap will scramble for the futhers, and you need a fuse to be at the bottom of the page. ♪ ♪
-
*{ 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, the marking itself, as it appears to be not difficult, the basement itself turns into the bottom, that's all. Positioning in this case should not be used
