1

I have a NuxtJS app divided in several pages for my whole app. Inside my pages, I want to use a margin-top: auto rule.

However, for that to work, height needs to be set explicitly on the parent. A while back, I had to add height: 100% recursively on the parents so that margin: auto works in my page. The behaviour that I want is the default (html tag height should adapt to its content).

It works when there is not too much content but I ran into a problem.

When my page has a lot of content and scroll is needed, if I inspect my page in Chrome Devtools, it seems that the <html> tag only takes "100vh" of the page (the container is as tall as the current window but if I scroll down I can see the limit of the div and the content overflows).

What could be a solution to solve this? What is height: 100% on the <html> tag worth (because it has no parent)?

<html>
 <body>
  <div class="__nuxt">
   <div class="__layout">
    <div class="example-layout">
     <div class="my-page">
      <div class="container-to-align-to-bottom">
       Example
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

base.scss

html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
}

body {
  height: 100%;
}

#__nuxt {
  height: 100%;
}

#__layout {
  height: 100%;
}

example-layout.vue

.example-layout {
 display: flex;
 flex-direction: column;
 height: 100%;
}

my-page.vue

.my-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container-to-align-bottom {
  margin-top: auto;
}
Théo Lavaux
  • 1,364
  • 3
  • 22
  • 46
  • 2
    Read this: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths – Randy Casburn Dec 15 '21 at 15:05
  • Not really an answer but hopefully useful nonetheless: simply use min-height instead. –  Dec 15 '21 at 15:06
  • @RandyCasburn Do you want to say that I should use another unit than percentage that would be more appropriate? – Théo Lavaux Dec 15 '21 at 15:15
  • @ChrisG I would like to take the remaining margin when there is enough space and decrease until no margin can be added, how would you achieve that using `min-height`? – Théo Lavaux Dec 15 '21 at 15:17

1 Answers1

1

If you want to have a scalable container which is still taking all the height and a sticky button at the bottom, you can do the following

<div class="container">
  <input type="text" />
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis efficitur metus vitae fermentum. Nam
    blandit felis urna, vitae ornare purus molestie bibendum. Sed vehicula sem vel magna feugiat consectetur. Integer
    quis eleifend ex. Fusce leo metus, consequat eu tempus et, luctus nec nisl. Vestibulum interdum rhoncus nibh quis
    condimentum. Integer sed mollis orci, vitae ullamcorper ex. Fusce eu auctor metus. Sed blandit risus eget mauris
    malesuada suscipit.

    Praesent et arcu pretium, tempus arcu vel, rutrum ex. Duis congue rutrum lorem. Sed imperdiet hendrerit eleifend.
    Morbi nec pellentesque elit. Nunc dictum eu magna nec rutrum. Sed tristique, urna a vehicula volutpat, leo nisl
    congue quam, id condimentum risus ligula sit amet nibh. Aenean sit amet eros consectetur, malesuada erat at,
    venenatis dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vulputate, dolor ac
    venenatis fermentum, nisl magna molestie leo, quis convallis purus erat sit amet mauris. Quisque molestie luctus mi
    bibendum mollis. Fusce odio urna, efficitur ut arcu vel, pulvinar blandit justo. Integer eget mauris vitae augue
    auctor vehicula in sed mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Sed tristique scelerisque tristique.

    Aenean venenatis odio non feugiat lacinia. Nulla pellentesque nunc a purus pharetra efficitur. Fusce in tortor
    ultricies, vulputate lectus et, blandit libero. Phasellus ornare ultrices enim, et tempus sem elementum ut. Donec in
    libero sed ligula hendrerit semper. Aliquam sit amet nibh aliquet, efficitur nibh at, molestie urna. Cras accumsan
    luctus elit, quis tempus mauris vestibulum non. Aenean odio turpis, imperdiet vitae interdum euismod, pellentesque
    et nulla. Nullam scelerisque lectus risus. Vivamus hendrerit in justo eu rutrum. Sed eget facilisis lorem, venenatis
    imperdiet nisi. Maecenas molestie auctor fermentum. Quisque scelerisque convallis velit, quis pulvinar dolor. Nam in
    elit nec tellus mattis vulputate quis et orci.

    Cras tempor nibh quis cursus mattis. Mauris magna dui, ultrices nec ante eget, congue euismod arcu. Aliquam libero
    augue, dictum pulvinar mattis sit amet, mollis non augue. Phasellus vel cursus mauris, ac gravida arcu. Integer quis
    pharetra neque. Cras ut vulputate tortor, non semper odio. Mauris bibendum purus id risus gravida, ultricies dictum
    libero lobortis. Morbi leo lectus, tempor ut dui a, rutrum semper massa. Phasellus aliquam dui diam, a tincidunt
    tortor egestas a. Sed magna ligula, viverra eget ante a, sagittis auctor nibh.

    Nunc tristique volutpat facilisis. Donec sit amet velit sit amet nulla hendrerit finibus quis ut nulla. Curabitur
    cursus, justo non auctor maximus, enim libero sodales dolor, quis egestas nibh neque eget diam. Vestibulum vitae dui
    sollicitudin, cursus mi in, consequat erat. Morbi interdum nibh posuere felis facilisis tincidunt. Sed aliquam felis
    porttitor cursus semper. Sed ante orci, commodo in mi non, consequat fringilla lorem. Sed sodales gravida quam.
    Nulla scelerisque laoreet justo ac pellentesque. Sed augue nulla, bibendum non feugiat eget, efficitur eu lorem.
    Fusce ullamcorper risus sed facilisis congue. Nulla tincidunt porttitor lectus, non tincidunt arcu convallis ut.
    Aenean molestie dolor tellus, a semper ligula ultricies ut. Ut orci leo, ultricies non aliquet in, posuere id nulla.
    Proin vestibulum suscipit ex, ac consectetur augue faucibus hendrerit. Mauris rutrum, quam at varius commodo, augue
    lorem egestas.
  </p>
  <button class="button">Button</button>
</div>

* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  padding: 2rem 4rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  border: 2px solid red;
}

.button {
  margin-bottom: 8rem;
  justify-self: end;
}

Here is a codepen.

This article on CSS Tricks is pretty useful for this purpose.

If you have some issues with your mobile browser taking space off the bottom of your screen, here are some links to solve this issue:

kissu
  • 40,416
  • 14
  • 65
  • 133
  • I chose the flexbox approach and did this: https://codepen.io/theolavaux/pen/MWEpOEN?editors=1100 – Théo Lavaux Dec 15 '21 at 22:14
  • My only remaining problem is that the padding disappears around the button when the content overflows the container (i.e. mobile size). – Théo Lavaux Dec 15 '21 at 22:14