溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“css怎么實現(xiàn)高度自適應”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css怎么實現(xiàn)高度自適應”吧!
在寫css靜態(tài)頁面的時候讓Html的高度自適應屏幕高度是一個常見的需求，比如你有一個需要置底的bottom按鈕，需要在內(nèi)容不足一屏的時候顯示在屏幕的底部，在內(nèi)容超過一屏的時候顯示在所有內(nèi)容的底部。
方法1
給html元素設置“height:100%;display:table;”樣式，給body元素設置“display:table-cell;height:100%;”樣式即可。
html {
height: 100%;
display: table;
}
body {
display: table-cell;
height: 100%;
}方法2：使用flex布局
.container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header {
background: #cecece;
min-height: 100px;
}
content {
background: #bbbbbb;
flex: 1; /* 1 代表盡可能最大，會自動填滿除了 header footer 以外的空間 */
}
footer {
background: #333333;
min-height: 100px;
}到此，相信大家對“css怎么實現(xiàn)高度自適應”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
