如何讓div元素始終佔據全螢幕？

Mary-Kate Olsen

發布： 2024-12-09 00:20:10

原創

1001 人瀏覽過

How to Make a Div Element Always Occupy the Full Screen?

如何保持

無論內容大小如何全螢幕

問題：

製作一個

是否可行？元素佔據整個螢幕，無論其包含的內容為何？

解決方案：

以下CSS方法總是達到預期效果：

<head>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }

    #wrapper {
      min-height: 100%; /* This ensures the `#wrapper` is at least as tall as the viewport */
    }
  </style>
</head>

<body>
  <div>

登入後複製

此解決方案既簡單又跨瀏覽器相容。它涉及設定四個 CSS 屬性：

的 height: 100%和元素確保它們垂直填滿整個螢幕。
邊距：為 0和 elements 會刪除可能影響全螢幕效果的任何預設邊距或填滿。
#wrapper 元素的 min-height: 100% 確保它始終至少與視口一樣高，即使其內容更短。這可以防止內容被裁剪或滾動。

以上是如何讓div元素始終佔據全螢幕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

來源：php.cn

上一篇：如何使用 HTML 和 CSS 在圖像懸停上顯示文字？下一篇：如何使用 Flexbox 將文字在水平線中居中？

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章