DIV CSS 佈局教程網

DIV height與DIV自適應高度設置篇

div height（DIV高度）如何設置，DIV盒子高度樣式與自適應高度設置實現。

一、div標簽內設置height高度樣式

在div標簽內使用style屬性即可設置此DIV盒子高度樣式。

小例：

<div style="height:50px">我高度為50px</div> 

解釋：以上通過div標簽的style屬性樣式設置height高度樣式。

二、外部樣式設置指定div盒子高度

此方法是常用的標簽外部CSS樣式設置對象樣式法。可以通過將CSS代碼寫入CSS文件，再通過HTML引入CSS文件即可使用；也可以直接在HTML源代碼內使用style標簽設置CSS樣式代碼。

這裡為大家演示html網頁源代碼內使用style標簽設置外部CSS樣式。

為了觀察效果本div高度height實例，對象div命名為“.thinkcss”，寬度為150px，height為80px，css邊框為1px藍色

DIV+CSS小例CSS代碼：

<style> 
.thinkcss{ height:80px; width:150px; border:1px solid #00F} 
</style> 

小例HTML代碼：

<div class="thinkcss">我高度為80px</div> 

css+div高度小例效果截圖：

div height高度實例截圖

div height小例在線演示：查看案例

小例div 高度打包下載：

立即下載 （0.821KB）

三、div自適應高度如何設置實現

如何實現div自適應高度，隨div內容增加而變高，隨內容減少，div高度變小？
很簡單height:auto即可，當然div默認高度的樣式值其實就是auto，如果要想div自適應高度，可以對div不設置height樣式即可實現。

擴展相關閱讀：
1、div 寬度
2、css寬度
3、css圖片寬度
4、css自適應高度
5、span寬度設置
6、css隱藏div超出寬度內容
7、文字不超過固定寬度
8、div寬度計算
9、圖片撐破div解決
10、css高度
11、css最小高度與最大高度