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

首頁

web前端

css教學

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

不言

Sep 10, 2018 pm 02:02 PM

css 自適應高度

在進行網頁開發時，可能會遇到這樣的情況，網頁中的內容會超出你原先設定的高度或寬度，這時就需要實現高度自適應或寬度自適應，以下將給大家來介紹關於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高度根據內容自適應的簡單方法

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

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

相關建議：

css,DIV高度自適應_html/css_WEB-ITnose

div css 左右兩列高度自適應以及父級div也跟著自適應子級的高度_html/css_WEB-ITnose

以上是css高度自適應如何實現？ css高度根據內容自適應的簡單方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1665

CakePHP 教程

1423

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。