CODEWITHSUNDEEP
csshtml
Ickbinet
Ickbinet

Reputation: 277

How to create a full page layout using pure semantic html + css

I have this html body:

    <body>
     <header>
     </header>
     <main>
     </main>
     <footer>
     </footer>
    </body>

How can I make the footer sticky to the bottom in a way that it does NOT overlay the main part if this main part is bigger than the viewport of the browser? I want to use only css for layout and no additional html elems.

Upvotes: 0

Views: 226

Answers (3)

Malay Solanki
Malay Solanki

Reputation: 110

Here's a working example: 

html{
  height : 100%;
}
body{  
  height : 100%;
  min-height : 100%;
}
header{  
  background :red;min-height : 10%;
  float :left;
  width : 100%;
}

main{  
 background :black;
  min-height : 80%;
  float :left;
  width : 100%;
  color : #ffffff;
}
footer{
  min-height : 10%;
  float :left;
  width : 100%;
  background :blue;
}
<body>
     <header >
     qwe
     </header>
     <main>
     qwe
     </main>
     
     <footer>
     footer
     </footer>
</body>

Upvotes: 1

Red
Red

Reputation: 7299

You can do this using Flexbox. See this for a complete guide to flexbox.

Check out this fiddle for a working demo: https://jsfiddle.net/9fr83575/

Using flex-grow: 1; on your main will fill the remaining space.

flex-grow
This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

Upvotes: 0

dutchsociety
dutchsociety

Reputation: 583

Well there are multiple ways to do so, please take a look here: https://css-tricks.com/couple-takes-sticky-footer/

But here a quick todo by simple using FLEX:

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1;
}
    <body>
      <header>
      </header>
      <main>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
      </main>
      <footer>
        <p>footer text</p>
        <p>footer text</p>
        <p>footer text</p>
      </footer>
    </body>

Upvotes: 0

Related Questions