如何防止div在視口上方溢位？

我有一個這樣的 div 居中：

<div class="container">
    START
    { lorem }
    END
</div>

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(65ch, 95vw);
}

這行得通： 但是如果我縮小視窗，我會得到這個： 我可以向下滾動并看到結尾，但不能向上滾動并看到開頭。同樣的事情發生在水平方向，如果沒有足夠的 X 空間，我可以向右滾動，但不能向左滾動。

如何使translate()div 向下移動一點以防止它在頁面上方溢位？

uj5u.com熱心網友回復：

在 body 上使用 flexbox

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  width: min(65vw, 95vw);
  margin: auto;
}

<div class="container">
  START Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia, accusantium pariatur? Corrupti molestias quas pariatur dolores aperiam! Quam voluptatibus laudantium id et aliquam possimus! Inventore sint, quo quia, autem tenetur unde optio,
  totam maiores provident repellendus exercitationem magnam? Quam ad fugit tempore, amet corrupti molestias dolorem voluptas vitae temporibus modi impedit animi neque, sit commodi! Temporibus quo dolores autem nemo architecto culpa laborum, perferendis
  a incidunt eius ab molestiae provident ea deleniti. Architecto dignissimos dolorum, autem consequatur alias voluptatem, fugiat porro quo odio, odit consectetur voluptate unde ullam ex magni itaque quam debitis. Asperiores deserunt quos autem animi,
  magnam repellendus sequi repudiandae nobis nostrum id aspernatur delectus ut modi saepe voluptates accusantium doloremque ab inventore harum totam expedita, praesentium enim. Adipisci odio minus atque tempore laborum totam quam ipsam maiores a ullam
  veniam at, non necessitatibus explicabo itaque quae consequuntur quaerat nostrum laboriosam blanditiis eveniet velit voluptatum. Libero neque sunt voluptatem laboriosam. Earum suscipit odio, rem explicabo quo beatae voluptates veritatis recusandae nam
  obcaecati voluptatibus quia deleniti totam accusantium! Maxime earum necessitatibus iste similique perspiciatis, magnam accusamus ducimus animi quos enim eius laboriosam id tenetur molestiae nemo ipsam. Deleniti, maiores. Aliquam, architecto magnam
  repudiandae, corrupti alias accusantium, autem dolorum atque officia saepe exercitationem aperiam ullam blanditiis quia? Aspernatur minus voluptas incidunt rerum ratione beatae suscipit earum quo natus nulla corporis praesentium odio officia facere
  magnam nesciunt reiciendis veritatis ea fuga, perferendis eaque necessitatibus amet. Tenetur reprehenderit optio laudantium, consequatur omnis ea doloribus eos inventore, deserunt quam, a reiciendis quasi eligendi officia ipsam veniam magnam sint eum
  odit nemo iste architecto alias voluptatem. Quae, minus temporibus voluptates tempore numquam dolore id. Incidunt aliquam, voluptatem voluptatibus minima dolorum earum eligendi tenetur rerum debitis id fugiat necessitatibus nobis, repudiandae quidem
  sed! Alias illo possimus et. Voluptas, voluptatibus odit? Consequatur, accusantium. Officiis unde reiciendis libero! Doloremque officia animi qui distinctio corrupti molestias mollitia quasi eius exercitationem iure laboriosam aspernatur alias corporis
  tempora natus odio quidem numquam voluptates autem dignissimos iste non, eum a. Vero modi aliquid quam voluptate nostrum accusantium harum eius! Reiciendis qui exercitationem autem aliquid ullam nisi labore consequuntur suscipit iusto totam pariatur
  ab dolores excepturi cum placeat, iste sunt obcaecati voluptate, atque voluptatem corporis quis! Nihil voluptas labore, molestias aliquam velit nobis atque quasi obcaecati deserunt minima blanditiis similique tempore, dignissimos sint odio corrupti
  voluptatem rem repudiandae dolorum explicabo, porro cum pariatur dolorem? Dolor suscipit corrupti consequatur sit non. Dolore recusandae quia ullam quibusdam officiis molestias maxime repellendus, quidem unde excepturi odit corporis ea natus, commodi
  reprehenderit quas eius officia. Provident, numquam. Consequuntur eligendi dolores expedita dolorum iure amet voluptate mollitia vero beatae ipsum voluptatum nostrum, ipsa tenetur molestias officiis sunt minima, illum cupiditate. Repellendus, voluptates
  ipsa rem nam odit dolore odio qui sunt, praesentium molestiae aliquam exercitationem natus quas quisquam dicta modi fuga accusantium amet animi dolorum hic voluptatum molestias ad? Id amet nesciunt a! Minima consequuntur sapiente, vitae, quas dolorum
  nam voluptates doloremque maiores cupiditate necessitatibus, soluta quos? Voluptas est exercitationem magni inventore impedit labore quos officiis adipisci ipsa! END
</div>

uj5u.com熱心網友回復：

解決方案 - 1

只需為您的容器添加高度，它就會起作用。

.container {
   -
   -
   -
   -
   -
   height: 100%;
}

解決方案 - 2（彈性）

添加以下 CSS 也可以解決該問題：

body {
    display: flex;
    justify-content: center;
}

通用解決方案 / CSS 的除錯技巧

1. 在使用 position absolute / translate 屬性時，您需要確保定義了 height 屬性。

2. 您始終可以檢查容器的盒子模型以除錯問題，或者至少了解正在發生的事情或問題來源，這很有幫助。大多數與 CSS 相關的中小型問題都可以通過檢查盒子模型來解決。

3. 在開始撰寫 CSS 之前，請始終添加以下內容：

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

這對大型專案有很大幫助，除非您有其他想法，或者它還取決于其他用例，但這些通常是每個人都喜歡的。

4. 為了使容器居中，您還可以使用 grid / flex 屬性，它們也是 CSS 中最好的對齊方式。

標籤：html css

上一篇：在頁腳中居中標題以組織它

下一篇：是否可以將元素的高度設為其容器寬度的100%？[復制]