溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“css怎么實現高度自適應”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css怎么實現高度自適應”吧!
在寫css靜態頁面的時候讓Html的高度自適應屏幕高度是一個常見的需求，比如你有一個需要置底的bottom按鈕，需要在內容不足一屏的時候顯示在屏幕的底部，在內容超過一屏的時候顯示在所有內容的底部。
方法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怎么實現高度自適應”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
