CSS 高度占滿屏幕是一個常見的網頁設計需求。下面介紹一些實現方式:
1. 使用 min-height
設置元素的 min-height 為 100vh。100vh 表示視口高度,即瀏覽器窗口的高度。代碼如下:
p { min-height: 100vh; }2. 使用絕對定位 設置元素的 position 為 absolute,然后將 top、left、bottom、right 屬性設置為 0。代碼如下:
p { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }3. 使用 flex 布局 使用 flex 布局可以很方便地實現元素高度占滿屏幕。將父元素設置為 display: flex 和 flex-direction: column,并將子元素設置為 flex-grow: 1。代碼如下:
.container { display: flex; flex-direction: column; } p { flex-grow: 1; }以上三種方式都可以實現元素高度占滿屏幕的效果。使用時需要注意不同的方式適用于不同的場景,選擇最適合的方式可以提高網頁的用戶體驗。
上一篇css 音樂無限播放