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


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2