本篇文章展示了css實現高度自適應的具體操作，代碼簡明扼要容易理解，如果在日常工作遇到這個疑問。希望大家通過這篇文章，找到解決疑問的辦法。
首先，我們剛開始設計某些網頁板塊時，總會給其一個height高度值，讓它剛好適合內容大小。
我們來看一個具體的實例代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
.con{
height: 100px;
width: 400px;
background-color: #9fcdff;
color: black;
}
</style>
<body>
<div class="con">
<p>億速云</p>
<p>億速云</p>
<p>億速云</p>
</div>
</body>
</html>給其一個height高度值這種方法在你增加內容時，就會出現下面這種情況：
這就是所謂的高度不適應，也就是css高度無法根據內容實現自適應，那我們如何來實現css高度根據內容自適應呢？
其實很簡單，這里我們只需要把height屬性去掉，給它一個padding-bottom的值。那么，css高度就會根據內容來實現自適應。
padding-bottom屬性設置元素的下內邊距（底部空白）。
我們來看一下具體的高度自適應實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
.con{
padding-bottom:1cm;
width: 400px;
background-color: red;
color: black;
}
</style>
<body>
<div>
<p>億速云</p>
<p>億速云</p>
<p>億速云</p>
<p>億速云</p>
<p>億速云</p>
</div>
</body>
</html>以上就是css實現高度自適應的代碼分享，代碼示例簡單明了，如果在日常工作遇到此問題。通過這篇文章，希望你能有所收獲，更多詳情敬請關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
