css高度自適應如何實現？ css高度根據內容自適應的簡單方法-css教學-PHP中文網

css高度自適應如何實現？ css高度根據內容自適應的簡單方法

不言

發布： 2018-09-10 14:02:01

原創

16787 人瀏覽過

在進行網頁開發時，可能會遇到這樣的情況，網頁中的內容會超出你原先設定的高度或寬度，這時就需要實現高度自適應或寬度自適應，以下將給大家來介紹關於css高度自適應。

PS：css寬度自適應的介紹內容，可以看這篇文章：css自適應佈局：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>php中文网</p>     
     <p>php中文网</p>     
     <p>php中文网</p>
     </div> 
     </body>
      </html>

登入後複製

效果如下：

css高度自適應如何實現？ css高度根據內容自適應的簡單方法

給其一個height高度值這個方法在你增加內容時，就會出現下面這種情況：

css高度自適應如何實現？ css高度根據內容自適應的簡單方法

這就是所謂的高度不適應，也就是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>php中文网</p>     
     <p>php中文网</p>     
     <p>php中文网</p>
    <p>php中文网</p>     
     <p>php中文网</p>
     </div> 
     </body>
      </html>

登入後複製

高度自適應效果如下：

css高度自適應如何實現？ css高度根據內容自適應的簡單方法