CODEWITHSUNDEEP
csshtml
Declan Watt
Declan Watt

Reputation: 71

Html5 CSS Layout Footer

I am trying to create a sticky footer but I'm getting empty space above and below my header & footer. 

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
header {
  background-color: orange;
  position: relative;
  height: 400px;
  width: 100%;
  color: white;
  text-align: left;
}
footer {
  background-color: #202020;
  color: white;
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Porfolio</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <header>
    <h1>header</h1>
    <p>header</p>
  </header>

  <div class="wrapper">
    content
  </div>

  <footer>
    footer
  </footer>
</body>

</html>

What is the best way to create a sticky footer? Can anyone explain why I've got this space appearing above header & below footer when I have content (h1 p) in in my header section.

Upvotes: 1

Views: 315

Answers (5)

user2167706
user2167706

Reputation: 

footer {
  background-color: #202020;
  color: white;
  //replace absolute with fixed for sticky footer (as in, it sticks at the bottom.)
  position: fixed;
  width: 100%;
  height: 60px;
  bottom: 0;
}

I saw this comment you posted on another answer:

If desktop only, then I would go with fixed positioning; however, iOS has problems rendering fixed positioning at times. – SergeantHacker

Try removing height 100% from body and html.

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106048

you may use flex prperties

.wrapper may scroll, header & footer are sticky

/* demo purpose */
.wrapper:hover:before {
  content:'test';
  display:block;
  height:1000px;
  }
/* end demo purpose*/
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
display:flex;
  flex-flow:column;
}
header {
  background-color: orange;
  position: relative;
  width: 100%;
  color: white;
  text-align: left;
}
footer {
  background-color: #202020;
  color: white;
  width: 100%;
  height: 60px;
  bottom: 0;
}
.wrapper {
  flex:1;
  overflow:auto;
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Porfolio</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <header>
    <h1>header</h1>
    <p>header</p>
  </header>

  <div class="wrapper">
    content
  </div>

  <footer>
    footer
  </footer>
</body>

</html>

or just footer is sticky ?, needs an extra imbrication

/* demo purpose */
.wrapper:hover:before {
  content:'test';
  display:block;
  height:1000px;
  }
/* end demo purpose*/html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body, main {
  display: flex;
  flex-flow: column;
}
header {
  background-color: orange;
  position: relative;
  color: white;
  text-align: left;
}
footer {
  background-color: #202020;
  color: white;
  height: 60px;
  bottom: 0;
}
.wrapper, main {
  flex: 1;
  }
main {
  overflow: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Porfolio</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <main>
    <header>
      <h1>header</h1>
      <p>header</p>
    </header>

    <div class="wrapper">
      content
    </div>
  </main>
  <footer>
    footer
  </footer>
</body>

</html>

Upvotes: 0

blurfus
blurfus

Reputation: 14041

For the header gap, your h1 and p tags have a default padding and margin, you may want to remove them or reduce them to your liking

h1, p {
  padding: 0;
  margin: 0;
}


html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
h1,p {
  padding: 0;
  margin: 0;
}
header {
  background-color: orange;
  position: relative;
  height: 400px;
  width: 100%;
  color: white;
  text-align: left;
}
footer {
  background-color: #202020;
  color: white;
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Porfolio</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <header>
    <h1>header</h1>
    <p>header</p>
  </header>

  <div class="wrapper">
    content
  </div>

  <footer>
    footer
  </footer>
</body>

</html>

Upvotes: 1

Lio
Lio

Reputation: 1503

In your example, you are not "resetting" the h1 and p tags. By default these elements have some extra margin.

Try adding the following code to your css.

h1, p {
  margin: 0;
}

Also check out the HTML5 CSS Sticky Footer.

Upvotes: 0

Cyril Duchon-Doris
Cyril Duchon-Doris

Reputation: 14039

A "sticky" div can be achieved using position: fixed; in your footer CSS. Fixed means that the on-screen position will never change. Or rather you should follow the instructions posted there.

Concerning the space, it is probably because of the default styles applied to h1. Use a debugger to see those default styles and override them with your custom css.

Firefox and Chrome have built in debuggers that also let you view styles and are very efficient for debugging. Usually right click > "inspect element" then go for the CSS tab which lets your select and see styles applied to elements.

Upvotes: 0

Related Questions