Question 180302 in Html Question posted in
Some basic documentation can be found here.

Is the footer stuck to the bottom if the actual page height is greater than HTML height?

I have a situation where I use several sliders on the page due to which the actual height of the page changes

Let’s say my html height is 600px but due to some sliders the actual page height is 1000px

And because of this, when I try to stick the footer to the bottom using position: absolute and bottom: 0, I have it placed at the end of the html height

I used an example to show how everything looks like for me

If I use position: relative then on other pages where the height is small, it will not be at the bottom

How can I stick the footer to the bottom of the page in this case?

I have also tried wrapping the entire html content in a class .wrapper { height: 100%; display: flex; flex-direction: column; } and for the footer use position: relative and margin-top: auto

This kind of helped, but then there were problems with the blocks that come after the html, they lost their width..

html {
  height: 500px;
}

.main-content {
  padding: 200px;
  text-align: center;
}

.content {
  padding: 300px;
  text-align: center;
}

.footer {
  padding: 40px 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  background: gray;
}
<html>
<div class="main-content"> MAIN CONTENT</div>
<div class="content">CONTENT</div>
<footer class="footer">FOOTER</footer>
</html>
Tags:

3

Answers


  1. 0

    An easy way to solve this issue is to set a minimum height on the block level element before the footer and to ditch all the positioning.

    Let’s say that you’d want to have a footer that’s 50px high. Your element before that should be at least 100vh - 50px high in order to cover the full height of the screen even if the content isn’t that big. You can do this with calc.

    body {
    margin: 0;
}
.main-content {
    background-color: red;
    min-height: calc(100vh - 50px)
}

.footer {
    height: 50px;
    background: gray;
}
    <body>
    <div class="main-content"></div>
    <footer class="footer"></footer>
</body>

    I took the liberty and simplified your HTML structure. You can place anything inside main-content and the footer will stay at the bottom. If you for example modify the code to have min-height: 200vh instead of the calc…

    body {
    margin: 0;
}
.main-content {
    background-color: red;
    min-height: 200vh;
}

.footer {
    height: 50px;
    background: gray;
}
    <body>
    <div class="main-content"></div>
    <footer class="footer"></footer>
</body>

    …you can see that the footer stays at the bottom of the page even if main-content is bigger than what I provided in the first snippet.

    Login or Signup to reply.
  2. 0

    Grid is awesome for these types of designs where you want to have a fixed footer/header/sidebar along with with some other scrolling content.

    In the example below, there are 3 rows. Using a fractional for the height (1fr) on the main content, it will essentially grow to fill whatever space is available in the grid, after taking into account the height of the other rows. In this case, the footer has a fixed height and uses max-content for it’s height, while the aside uses auto, so it grows to adjust to its contents. Playing with the various grid-template-rows is incredibly powerful.

    Run the snippet below, and then choose the full page option to see how it works at different viewport sizes.

    *, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: 1fr auto max-content;
  height: 100%;
  line-height: 1.5;
}

.main-content {
  background-color: #ccc;
  overflow-y: scroll;
  padding: 1rem;
}

.content {
  background-color: #c9c;
  padding: 1rem;
}

.footer {
  background: #cec;
  height: 5rem;
  padding: 1rem;
}
    <main class="main-content">
  <p><code>main</code> Grid row height is <code>1fr</code> so it has a variable height that adjusts to take up whatever the remaining height of the grid is after accounting for the other two row heights.</p>
  <p>Using <code>overflow-y: scroll</code> on this element also allows it to scroll vertically when needed to fit its contents</p>
</main>
<aside class="content">
  <p><code>aside</code> Grid row height is auto so it has a variable height that adjusts to the size of its content.</p>
</aside>
<footer class="footer">
  <p><code>footer</code> Grid row height is max-content.  The footer has fixed height and always "sticks" to the bottom of the viewport.</p>
</footer>
    Login or Signup to reply.
  3. 0

    You can use flexbox. Uncomment height property in body to see the changes.

    Check the elements html, body, main and footer in the code below.

    Resources:
    CSS Tricks | Flexbox
    CSS Tricks | Flexbox and Auto Margins
    Dev | Stick Footer to The Bottom of The Page

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  /*height: 1000px;*/
}

header {
  height: 50px;
  background-color: cyan;
}

main {
  flex: 1;
}

footer {
  margin-top: auto;
  height: 70px;
  background-color: red;
}
    <html>
  <body>
    <header>Header</header>
    <main>Main</main>
    <footer>Footer</footer>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search