91看片就是不一样,亚洲区成人777777精品,四虎成人在线播放

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

在進行網頁開發時，可能會遇到這樣的情況，網頁中的內容會超出你原先設置的高度或者寬度，這時就需要實現高度自適應或者寬度自適應，下面這篇文章將給大家來介紹關于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>

效果如下：

2345截圖20180910111115.png

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

2345截圖20180910111333.png

這就是所謂的高度不適應，也就是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>

高度自適應效果如下：

2345截圖20180910111921.png

附：更多padding-bottom屬性的相關介紹可以參考css手冊，這里就不多說了。

總結：上述這種方法只是簡單的通過設置css中的padding-bottom屬性值來實現高度根據內容自適應，當然還有其他更多的方法，更多的方法可以去php中文網css教程欄目中去尋找。

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

css高度自適應如何完成？css高度根據內容自適應的容易方法

本類教程下載

系統下載排行