CODEWITHSUNDEEP
htmlcss
Gabriel Daniel
Gabriel Daniel

Reputation: 21

How to separate header body and footer

I want to know how to separate a header, body and footer, so when you open the page you can see the header and body and scroll for footer. I tried with margins but didn't get the results I wanted. This is the CSS:

body {
    width: 100%;
    margin: 0 auto;
    background-image: url(imagine2.jpg);
    background-size: cover;
    background-attachment: fixed;
}

header {
    width: 100%;
    background-color: yellowgreen;
    height: 58px;
    margin-bottom: 10px;
}

a {
    text-decoration: none;
}

.navbar {
    float: right;
}

.navbar li{
    display: inline;
}

.navbar li a {
    color: blanchedalmond;
    padding: 25px 50px;
}

.navbar li a:hover {
    color: chartreuse;
    background-color: cornsilk;
}

Upvotes: 1

Views: 12244

Answers (2)

MTBthePRO
MTBthePRO

Reputation: 520

From what I understood. Your actual issue is keeping footer at the bottom. Here is a demonstration of how to keep footer at the bottom.

I recommend using CSS grids for all HTML templates. Otherwise it can be difficult to keep footer at the bottom for all screen sizes. That being said, try using flexbox.

Insert all of your html in main and flexbox will push footer to the bottom of the page.

/* The magic: */
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

/* Stlyes to make the demo easier to see: */
body { margin: 0; }
header { background-color: #FD2D; }
main { background-color: #DFDD; }
footer { 
    background-color: #049e8c;
    height: 50pt;
    text-align: right;
    bottom: 0;
}
<body class="Site">
  <header>Header</header>
  <main class="Site-content">Content</main>
  <footer>Footer</footer>
</body>

If you want to try CSS Grids, you need to do something like this. All HTML content goes into the Site-content section. Hope this helped :)

/* Stlyes to make the demo easier to see: */
html{
      height: 100%;
    }
    
 body { 
  margin: 0; 
  display: grid;
  height: 100%;
  grid-template-areas:
        "header_section"
        "Site-content_section"
        "footer_section";
  grid-template-rows: 100px 100% 50px; /* 100px for header, 100% for content section, 50px for footer */
}
.header { 
grid-area: header_section;
background-color: #FDD; 
}
.Site-content { 
grid-area: Site-content_section;
background-color: #DFD; 
}
.footer {
  grid-area: footer_section;
  background-color: #049e8c;
}
<body>
  <div class= "header">Header</div>
  <div class="Site-content">Content</div>
  <div class= "footer">Footer</div>
</body>

Upvotes: 1

symlink
symlink

Reputation: 12209

You can use a top margin of auto on the footer, but you have to set the body to flex. See the CSS code labeled /* Sticky footer */

body {
    width: 100%;
    margin: 0 auto;
    background-image: url(http://placekitten.com/1000/1000);
    background-size: cover;
    background-attachment: fixed;
}

header {
    width: 100%;
    background-color: yellowgreen;
    height: 58px;
    margin-bottom: 10px;
}

a {
    text-decoration: none;
}

.navbar {
    float: right;
}

.navbar li{
    display: inline;
}

.navbar li a {
    color: blanchedalmond;
    padding: 25px 50px;
}

.navbar li a:hover {
    color: chartreuse;
    background-color: cornsilk;
}

footer{
   background-color: yellowgreen;
   color: blanchedalmond;
   padding: 20px 20px;
}


/* sticky footer */
html, body{
   height: 100%;
}
body{
   display: flex;
   flex-flow: column;
}
footer{
   margin-top: auto;
}
<header>
   <ul class="navbar">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
   </ul>
</header>

<footer>This is the footer</footer>

Upvotes: 0

Related Questions