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

Calc broken with more 100vh – Html

I am creating a page with a position: fixed; footer, which will need to expand on scroll, but take at least 100% of the page. I wanted to make my main wrapper take the whole space without ever being behind the footer. So created a min-height with calc(100vh - 120px). Here is the code:

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

body,
html,
#app {
  min-height: 100vh;
  max-width: 100vw;
}

#wrapper {
  min-height: calc( 100vh - 120px);
  height: auto;
  max-width: 100vw;
}

footer {
  height: 120px;
  width: 100%;
}
<footer>
  <section id="lien-express">
    <div class="lien-express-1">
      <p>Lien lien-express</p>
    </div>
    <div class="lien-express-2">
      <p>Lien lien-express</p>
    </div>
  </section>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
    <RouterLink to="/portfolio">About</RouterLink>
    <RouterLink to="/catalogue">About</RouterLink>
  </nav>
</footer>
<main id="wrapper">
  <RouterView />
</main>

My problem is that when I tell the <div> to be more than 100vh the calc function is not working. The <div> is taking all the space without talking the calc into account:

Here is the screenshot of the console to show you the difference

With 100vh:
With 100vh

With more than 100vh:
with more than 100vh

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So the final solution that worked for me was :

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'lato';
}

body,html, #app {
    min-height: 100vh;
    max-width: 100vw;
}

#wrapper {
    min-height: 100vh;
    height: auto;
    max-width: 100vw;
    padding-bottom: 120px;
}
footer {
    height: 120px;
    width: 100%;
    background-color: pink;
    position: fixed;
    bottom: 0;
    display: grid;
    grid-template-rows: 1fr 2fr;

    #lien-express {
        display: flex;

        .lien-express-1 {
            @include flex-lien-express;
            background-color: $DBLUE;
        }
        .lien-express-2 {
            @include flex-lien-express;
            background-color: $MGREY;
        }
    }
}

    The calc don't take under account an auto height. So when i was trying to calculate with calc i could not calculate with an unknown variable. But i could create a parent that was doing the job of the calc by applying a padding, at put the element inside it.


  2. 0

    If what you really want is a layout that will always fill at least 100% of the viewport and the main content stretches to fill whatever space is available while the footer is at the bottom of the content, then you should use grid like so:

    Edited so the footer always sticks at the bottom of the viewport

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

body {
  margin: 0;
}

#app {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr max-content; 
}

header {
  padding: 1rem 2rem;
  background-color: black;
  color: white;
  margin: -1rem -2rem 2rem;
}

main {
  padding: 1rem 2rem;
  overflow-y: auto;
}

footer {
  padding: 1rem 2rem;
  background-color: black;
  color: white;
}
    <div id="app">
  <main>
    <header>header will only be as big as its content and scroll away with the content.</header>
    <h1>main will stretch to fill the remaining space in the middle</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores laudantium quas reprehenderit nulla. Dignissimos autem nam cupiditate repellat, magni, esse culpa aperiam iste incidunt asperiores, assumenda modi porro blanditiis laboriosam!</p>
    <p>Similique recusandae ad ex ipsa, deserunt dolor molestias eveniet at? Nostrum aspernatur corporis incidunt adipisci id consequuntur, praesentium eveniet veniam aut illum doloribus quibusdam eos molestiae nesciunt! Soluta, autem qui.</p>
    <p>Molestiae vitae dignissimos pariatur rerum repudiandae dolores sequi libero voluptas, quidem, provident, adipisci ipsam similique itaque. Alias, suscipit laborum beatae provident accusantium sunt nulla minus cupiditate ratione, commodi adipisci praesentium.</p>
    <p>Magni, a quos facilis ad quas nobis reprehenderit magnam maiores id, necessitatibus molestiae repellat, error dolores earum ex officiis totam debitis. Omnis doloremque, suscipit aliquid distinctio itaque iusto voluptas obcaecati.</p>
    <p>Quasi eos ea illum modi eum quidem maxime aperiam accusamus aliquid nam, nobis aut, esse labore voluptates non nihil molestiae earum laborum repudiandae necessitatibus deleniti obcaecati? Asperiores, aliquid laboriosam. Libero.</p>
    <p>Provident laboriosam enim eaque quo? Aliquam, nesciunt eveniet amet beatae accusantium placeat ullam. Ipsum, nihil culpa inventore libero architecto tempore voluptas, totam pariatur similique quas expedita sint molestias vitae dicta.</p>
    <p>Eos fugiat quod obcaecati, possimus, excepturi ducimus recusandae quisquam mollitia sit doloremque nihil ipsum adipisci inventore sint quasi aperiam neque quidem quos? Dolorum, doloremque iusto et quod corporis error nihil.</p>
    <p>Incidunt, provident vel id suscipit quasi ut quae eligendi accusamus, minus iusto vitae excepturi enim, modi possimus? Dolorum molestiae quis maiores, delectus similique hic nulla quasi molestias. Eligendi, eos ipsa.</p>
    <p>Labore, facere! Eligendi rerum natus alias optio dolorum facilis maiores ad tempora? Ratione doloribus laboriosam dolor repudiandae obcaecati qui cumque ducimus eos, odit debitis nesciunt illum repellendus quisquam iusto voluptatum!</p>
    <p>Accusantium quidem aliquam, aut veniam corrupti, quas temporibus, consequatur ullam blanditiis provident fugiat quibusdam. Sint aliquam esse vero corporis amet praesentium adipisci sit, quisquam perferendis ducimus repudiandae autem dolores eius.</p>
  </main>
  <footer>footer will only be as big as its content and always stay at the bottom.</footer>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search