为什么在 html 元素上设置 height: 100% 使其表现得像 100vh？

Question

I have a NuxtJS app divided in several pages for my whole app.我有一个 NuxtJS 应用程序，我的整个应用程序分为几个页面。 Inside my pages, I want to use a margin-top: auto rule.在我的页面中，我想使用margin-top: auto规则。

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.不久前，我不得不在父母身上递归地添加height: 100% ，以便margin: auto在我的页面中工作。 The behaviour that I want is the default (html tag height should adapt to its content).我想要的行为是默认的（html 标记高度应该适应它的内容）。

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).当我的页面有很多内容并且需要滚动时，如果我在 Chrome Devtools 中检查我的页面，似乎<html>标签只占用页面的“100vh”（容器与当前的 window 一样高，但如果我向下滚动我可以看到 div 的限制和内容溢出）。

What could be a solution to solve this?有什么办法可以解决这个问题？ What is height: 100% on the <html> tag worth (because it has no parent)? <html>标签上的height: 100%是多少（因为它没有父级）？

<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基础.scss

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

body {
  height: 100%;
}

#__nuxt {
  height: 100%;
}

#__layout {
  height: 100%;
}

example-layout.vue示例布局.vue

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

my-page.vue我的页面.vue

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

.container-to-align-bottom {
  margin-top: auto;
}

Answer 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. CSS Tricks上的这篇文章对此非常有用。

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:如果您的移动浏览器在屏幕底部占用空间时遇到问题，以下是一些解决此问题的链接：

为什么在 html 元素上设置 height: 100% 使其表现得像 100vh？

问题描述

1 个解决方案

解决方案1
0 2021-12-15 18:22:12

为什么在 html 元素上设置 height: 100% 使其表现得像 100vh？

问题描述

1 个解决方案

解决方案1 0 2021-12-15 18:22:12

解决方案1
0 2021-12-15 18:22:12