CODEWITHSUNDEEP
htmlcss
Adler
Adler

Reputation: 2807

Footer doesn't go to the bottom

My page is divided into 3 pieces. The header the main and the footer.

The header is fixed to the top and is 109px with its 6px border height so the main has a 109px margin to the top.

I want the main to extend over the entire page below the header and to the footer that should, if no content that is available to push it down, rest on the bottom of the screen.

The footer is 86px high because it is 80px and 6px for a border at the top. The footer goes to the bottom and the main extends but if the page is longer than the page the footer isn't pushed down.

What can I do to keep the footer to the bottom if the content of the main is increased?

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
}


/* ---------------------------------------------------------------- */

main {
  padding-top: 120px;
  /* eigendlich 109px  */
  padding-bottom: 150px;
  /* eigendlich 86px  */
  text-align: center;
}

#all {
  height: 100%;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

#heading {
  font-family: "titlefont";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
  <script src="script.js"></script>
</head>

<body>
  <div id="all">
    <header id="header">
      <h1 id="heading">My Page</h1>
    </header>
    <main id="main">
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
    </main>
    <footer id="footer">
      <p id="credit">FOOTER</p>
    </footer>
  </div>
</body>

</html>

Upvotes: 2

Views: 1976

Answers (7)

StefanBob
StefanBob

Reputation: 5128

You can try a flexbox sticky footer! 

body {
    margin: 0;
}

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

header, footer {
    height: 40px;
    background-color: lightgray;
}

main {
    flex: 1 0 auto;
}
<div class="wrapper">
    <header><span>header</span></header>
    <main><span>main content</span></main>
    <footer><span>footer</span></footer>
</div>

Upvotes: 3

blecaf
blecaf

Reputation: 1645

Make the body tag have min-height: 100% and remove height. What you need to change:

body {
    /* height: 100%; */ Delete
    min-height: 100%;
}

Here's all the code, in a snippet:

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100%;
}


/* ---------------------------------------------------------------- */

main {
  padding-top: 120px;
  /* eigendlich 109px  */
  padding-bottom: 150px;
  /* eigendlich 86px  */
  text-align: center;
}

#all {
  height: 100%;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

#heading {
  font-family: "titlefont";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
<body>
  <div id="all">
    <header id="header">
      <h1 id="heading">My Page</h1>
    </header>
    <main id="main">
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
    </main>
    <footer id="footer">
      <p id="credit">FOOTER</p>
    </footer>
  </div>
</body>

Upvotes: 1

Kumar Nitesh
Kumar Nitesh

Reputation: 1652

you can change

 position: fixed;

in your #footer CSS

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
}


/* ---------------------------------------------------------------- */



#all {
  height: 100%;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

#heading {
  font-family: "titlefont";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}
main {
  padding-top: 120px;
  /* eigendlich 109px  */
  padding-bottom: 150px;
  /* eigendlich 86px  */
  text-align: center;
}
#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}
  <div id="all">
    <header id="header">
      <h1 id="heading">My Page</h1>
    </header>
    <main id="main">
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
    </main>
    <footer id="footer">
      <p id="credit">FOOTER</p>
    </footer>
  </div>

Upvotes: 2

zvava
zvava

Reputation: 101

Change position: absolute; to position: fixed;, that should fix it.

The #footer div should now look like this;

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

Click here to see it in action: JSfiddle DEMO.

Upvotes: 0

Aleksander Rezen
Aleksander Rezen

Reputation: 927

You need to add height: 100% to #main

main {
  padding-top: 120px;
  padding-bottom: 150px;
  text-align: center;
  height: 100%;
}

Upvotes: 1

andreim
andreim

Reputation: 3503

I created a solution by changing a bit the order of elements, if this is to be acceptable.

I removed <div id="all"> and added <header> and <footer> inside of <main>. <main> has min-height: 100% and padding-top and padding-bottom to accommodate the <header> and <footer>. <header> is fixed at the top and <footer> is in absolute positioning at the bottom of <main>.

Therefore:

  • when the content is less than window size <main> has min-height: 100%, <header> is fixed at the top and <footer> goes at the bottom in its absolute positioning
  • when the content is larger than the window size <main> has min-height: 100% so can expand above window size, <header> is fixed at top and <footer> foes at the bottom of <main> which is at the end of <main> content

html {
  height: 100%;
}

body {
  background-color: #f5f5f5;
  min-height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}


/* ---------------------------------------------------------------- */

main {
  box-sizing: border-box;
  padding-top: 120px;
  padding-bottom: 110px;
  text-align: center;
  min-height: 100%;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

#heading {
  font-family: "titlefont";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  height: 80px;
  z-index: 98;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
  <script src="script.js"></script>
</head>

<body>
    <main id="main">
      <header id="header">
        <h1 id="heading">My Page</h1>
      </header>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <h2>Content</h2>
      <footer id="footer">
        <p id="credit">FOOTER</p>
      </footer>
    </main>
</body>

</html>

Upvotes: 1

Asons
Asons

Reputation: 87191

Remove all the set height's but on header and footer, remove position absolute from the footer and use viewport units vh for the height on main, combined with CSS Calc, and you are good to go.

I also added overflow: hidden to main to make up for the collapsing margin caused by the h1, and box-sizing: border-box so the padding gets included in the set width.

html, body {
  margin: 0;
}
body {
  background-color: #f5f5f5;
}


/* ---------------------------------------------------------------- */

main {
  min-height: calc(100vh - 86px);
  padding-top: 109px;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

#heading {
  font-family: "titlefont";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}
<div id="all">
  <header id="header">
    <h1 id="heading">My Page</h1>
  </header>
  <main id="main">
    <h2>Content</h2>
    <h2>Content</h2>
    <h2>Content</h2>
    <h2>Content</h2>
    <h2>Content</h2>
    <h2>Content</h2>
    <h2>Content</h2>
    <h2>Content</h2>
  </main>
  <footer id="footer">
    <p id="credit">FOOTER</p>
  </footer>
</div>

Upvotes: 1

Related Questions