DIV footers match content - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Footer

Description

DIV footers match content

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ips</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
html, body {
   height:100%;
}

body {<!--from  w ww.j a  v  a  2 s  .  com-->
   min-height:100%;
}

.wrapper {
   height:100%;
   width:81%;
   margin:auto;
   border:2px solid Chartreuse;
   display:flex;
   flex-direction:column;
}

header, footer {
   height:76px;
   background:yellow;
}

.inner-wrap-one {
   flex:2;
   display:flex;
}

.sidebar-1 {
   background:blue;
   color:pink;
   flex:0 0 11%;
}

.inner-wrap-two {
   flex:2;
   background:plum;
   display:flex;
   flex-direction:column;
}

nav {
   height:76px;
   background:OrangeRed;
}

main {
   display:flex;
   flex:2;
}

.sidebar-2 {
   background:green;
   flex:0 0 11%;
   color:grey;
}

.content {
   flex:2;
   display:flex;
   justify-content:center;
   align-items:center;
   background:grey;
   color:BlueViolet;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <header>
     Lorem ip 
   </header> 
   <div class="inner-wrap-one"> 
    <aside class="sidebar-1">
      Lorem ipsum 
    </aside> 
    <div class="inner-wrap-two"> 
     <nav>
       Lorem ipsum 
     </nav> 
     <main> 
      <aside class="sidebar-2">
        Lorem ipsum 
      </aside> 
      <div class="content">
        Lorem ips 
      </div> 
     </main> 
    </div> 
   </div> 
   <footer>
     Lorem ip 
   </footer> 
  </div>  
 </body>
</html>

Related Tutorials