為什么在 html 元素上設置 height: 100% 使其表現得像 100vh？

Question

我有一個 NuxtJS 應用程序，我的整個應用程序分為幾個頁面。 在我的頁面中，我想使用margin-top: auto規則。

但是，要使其正常工作，需要在父對象上顯式設置高度。 不久前，我不得不在父母身上遞歸地添加height: 100% ，以便margin: auto在我的頁面中工作。 我想要的行為是默認的（html 標記高度應該適應它的內容）。

當內容不多但我遇到問題時，它可以工作。

當我的頁面有很多內容並且需要滾動時，如果我在 Chrome Devtools 中檢查我的頁面，似乎<html>標簽只占用頁面的“100vh”（容器與當前的 window 一樣高，但如果我向下滾動我可以看到 div 的限制和內容溢出）。

有什么辦法可以解決這個問題？ <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>

基礎.scss

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

body {
  height: 100%;
}

#__nuxt {
  height: 100%;
}

#__layout {
  height: 100%;
}

示例布局.vue

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

我的頁面.vue

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

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

Answer 1

如果您想要一個可擴展的容器，它仍然占據所有高度和底部的粘性按鈕，您可以執行以下操作

<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;
}

這是一個代碼筆。

CSS Tricks上的這篇文章對此非常有用。

如果您的移動瀏覽器在屏幕底部占用空間時遇到問題，以下是一些解決此問題的鏈接：

為什么在 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