2. 程式人生 > >min-height:100px; height:auto;的用法

min-height:100px; height:auto;的用法

阿新 • • 發佈：2019-01-23

總結：min-height:100px; height:auto;的用法

1、IE6有個BUG，就是如果指定了一個盒子的高度，但裡面內容又溢位了，那這個盒子的高度則會失去作用，盒子的高度會隨著內容的增長而自動增長

  （即內容不會溢位，而是把盒子撐大）

2、 IE7.0，8.0，FF如果在高度的方向內容溢位，它下面的弟弟元素會和上面的內容交疊在一起

（當內容少於height:100px;的高度時，不用加min-height:100px;height:auto;各瀏覽器的效果都是相同的）

CSS程式碼

<style type="text/css">

<!--

#one{

height:100px;

width:300px;

background:#ccc; 

border:1px blue solid;

font-size:12px;

}

#two{

height:100px; 

width:300px; 

background:#0CF; 

border:1px blue solid;

font-size:12px;

}

-->

</style>

</head>

<body>

<div id="one">

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

</div>

<div id="two">

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

</div>

</body>

如下圖所示

IE6.0顯示效果

總結：min-height:100px; <wbr>height:auto;的用法

IE7.0顯示效果

總結：min-height:100px; <wbr>height:auto;的用法

IE8.0，FF顯示效果

總結：min-height:100px; <wbr>height:auto;的用法

為了讓各瀏覽器的盒子高度隨內容高度的增加而增長

我們寫程式碼如下（只要在原始碼的基礎上加min-height:100px !important;

height:auto!important;）

<style type="text/css">

<!--

#one{

height:100px;

min-height:100px !important;

height:auto!important;

width:300px;

background:#ccc; 

border:1px blue solid;

font-size:12px;

}

#two{

height:100px; 

width:300px; 

background:#0CF; 

border:1px blue solid;

font-size:12px;

}

-->

</style>

</head>

<body>

<div id="one">

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

</div>

<div id="two">

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

</div>

</body>

測試後IE6.0，7.0 ，8.0 FF各瀏覽器盒子高度隨內容高度的增加而增長

如下圖所示：

總結：min-height:100px; <wbr>height:auto;的用法

但仔細測量各瀏覽器下每個盒子的高度，我們發現各不相同（這個問題還沒有解決）

IE6.0,7.0總高度如下圖

總結：min-height:100px; <wbr>height:auto;的用法

IE8.0,FF總高度如下圖

總結：min-height:100px; <wbr>height:auto;的用法

 問題的解決方法：一定將height:880px;放在最後寫。

 <title>無標題文件</title>
<style type="text/css">
#left_right{
width:968px;
height:auto;
}
#left{
width:743px;
background:green;
height:auto !important;
min-height:880px;
height:880px;
float:left;
}
#right{
float:right;
width:221px;
background:red;
height:auto !important;
min-height:150px;
height:150px;
}
</style>
</head>

<body>
<div id="left_right">
<divid="left">dfdf</div>
<divid="right">sdfd</div>
</div>
</body>
</html>

關於div高度自適應問題，相容IE和火狐

　　在此，並不是指div的高度可以簡單的自動調整。而是指在該div中沒有置放內容的情況下，至少要保持這個div的高度為多少，而有內容的時候，又會隨著內容的多少而自動調整。同時，對IE或是FF等瀏覽都可以相容的。舉個例項：

　　div要求至少高度需要200px。也就是說，即使div中沒有任何內容，高度也需要保持在200px；當DIV中的內容高度超過200px時，則該div會自動調節高度，而且又相容各瀏覽囂。怎麼解決呢？

　　對於初學者來說，可能想到的就是min-height:200px這個和height:auto這樣的寫法了。雖然這樣寫法用IE瀏覽器瀏覽是正常的，可是如果用火狐瀏覽囂一測試一下，就知道不相容而達不到預想的效果了。為什麼會這樣呢？原來是因為火狐瀏覽器此時不以height:auto這個執行為標準的。那要加上什麼屬性才可以讓兩個瀏覽器都正常去解讀css呢？辦法就是加上height:auto!important這個重要屬性。所以答案是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="Author"content="Div+CSS專業網頁佈局，www.divss.com" />
<meta name="keywords"content="div+css,網頁佈局,jpg切割佈局,網頁切割css,wap頁面佈局,網站重構"/>
<title>div+css自動調整高度</title>
</head>
<body>
<divstyle="width:auto;height:auto!important;min-height:200px;height:200px;background-color:#f4f4f4;font-size:12px">
此層最少高度為200px，也就是說，即使div中沒有任何內容，高度也會保持在200px，當DIV中的內容超過500px時，則自動增加DIV的高度。這個對IE或是FF等瀏覽器都會相容的。（背景色是為了方便檢視效果用的）<br/>
</div>
</body>
</html>

------------------------------------------------------------------------------------------------------------------------------------------

需要注意的是：在針對一個需要定高度，同時又希望能高度隨內容的變化自適應的話，寫發的順序要注意；下面是正確的定義順序；

height:auto!important; min-height:388px; height:379px;

DIV有背景顏色的時候，DIV被撐開但是背景顏色沒有被撐開，只要加上如下程式碼就可以了
overflow:hidden;

相關推薦

min-height:100px; height:auto;的用法

總結：min-height:100px; height:auto;的用法 1、IE6有個BUG，就是如果指定了一個盒子的高度，但裡面內容又溢位了，那這個盒子的高度則會失去作用，盒子的高度會隨著內容的增長而自動增長   （即內容不會溢位，而是把盒子撐大） 2、 IE7.0，

width 和 height 值為 auto 總結

盒子模型(Box Model):當對一個文件進行佈局(laying out)的時候，瀏覽器渲染引擎會根據CSS-Box模型（CSS Basic Box model）將所有元素表示為一個矩形盒子（box)。CSS決定這些盒子的大小，位置以及屬性（顏色，背景，邊框尺寸...)在CSS中，使用標準盒模型描述這些矩形

auto用法

pla clas roc eth 編譯 定義 iter iterator proc 在C++11中，如果編譯器在定義一個變量的時候可以推斷出變量的類型，不用寫變量的類型，你只需寫auto即可。 第一種用法：自動推到內置類型 int x = 100; //C++ 11 au

line-height和height

一行 就會 自身 對象 lin 圖片 等於 height 變化 1、定義不同：line-height是行高的意思，height則是定義元素自身的高度。 2、表示意義不同： line-height用來表示容器的高度，height用來表示這一容器內的每行文字的高度。 3、使用範

H5 --（解決）安卓的webview中line-height等於height不垂直居中問題

問題描述：用rem適配的H5頁面在安卓的webview中，當line-height等於height時，有時會稍微偏上一些，不能垂直居中（ps：ios上沒有這個問題） 1、分析原因：由於用rem作適配，則根元素的字型大小可能不是整數，然後將元素的字型大小設定為re

min-height和min-width的用法總結

max-height，max-height這裡我就不做探討了，相信聰明的你如果理解了min-height，min-width，其他大家自會理解…. 首先宣告min（max）、（width）height，這幾個屬性系類有一個試用範圍 應用於：除了非替換行內元素

width:100vh與min-height:calc(100vh + 51px)

-s 為我 ive tar res 表達 target ron 區域 vh:相對於視窗的高度，那麽vw:則是相對於視窗的高度。 “視區”所指為瀏覽器內部的可視區域大小，即window.innerWidth/window.innerHeight大小，不包含任務欄標題欄以及底部

css3——max-height 和 min-height

使用方法和普通的 height 一樣 max-height：最大高度 為了避免內容太多將高度撐太高影響佈局美化統一，這個時候我們設定最大高度限制。比如一個 table tr td 表格物件裡裝一個圖片，而圖片高度不確定，如果太高了不想圖片撐破 tr td 表格，這個時候通過 cs

ueditor單圖片（simpleupload）上傳，設置其 width：100%，height：auto。以適應各種屏幕大小顯示

適應 () 技術 width png 屏幕大小 bsp 代碼 操作 打開ueditor.all.js,按下圖操作（修改後註意清緩存）： 附上待搜索的關鍵字：function callback() 附上代碼 　　loader.setAttribute(‘width‘

如何為不定高度(height:auto)的元素新增CSS3 transition-property:height 動畫

轉自：如何為不定高度(height:auto)的元素新增CSS3 transition-property:height 動畫 當一個元素不設定height時，它的預設值是 auto，瀏覽器會計算出實際的高度。 但如果想給一個 height:auto 的塊級元素的高度新增 CSS3 動畫時

canvas定義width、height的正確用法

--廣告位佔位-- 現在前端程式碼書寫習慣，一般都會遵循標籤結構與樣式分離的寫法，即一般不新增標籤屬性來控制頁面元素顯示效果，而通過<style/> 或引用css檔案來實現！

CSS高度探究-滾動條的由來 （margin塌陷問題；height繼承問題，min-height:無法繼承問題）

參照文章 由html,body{height:100%}引發的對html和body的思考   例項     解決辦法 （1）margin-top 改為 padding-top （2）如果必須要用margin-top; 

CSS中height：auto 屬性無效

1、css屬性衝突 一種可能情況因為父div中的div處於浮動狀態，浮動是會脫離文件流的，內部兩個層就不會侷限於父層，所以父層不知道內部的高度，但清理浮動可以把他們“拉”回來。 兩種解決辦法： ①利用chrome查詢被覆蓋屬性的父級css屬性，並刪除。

height：calc（100%-100px）如何相容ie8

做公司後臺管理系統時，右邊content-main內容塊高度出現了相容問題。是content-main包裹了iframe。如何相容ie8，貼出以下程式碼部分（css,js）原來css供參考另一個參考地址：https://stackoverflow.com/questions/

css屬性行高line-height的用法詳解

什麼是行間距？ 古時候我們使用印刷機來出來文字。印刷出來的每個字，都位於獨立的一個塊中。 行間距，即傳說中控制兩行文字垂直距離的東東。在CSS中，line-height被用來控制行與行之間垂直距離。 不過，行間距與半行間距，還是取決於CSS中的line-height。

關於transition讓height:auto 失效的問題

<body> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style type

讓所有瀏覽器支援max-height、min-height CSS樣式

讓IE6支援max-height、讓IE6支援min-height樣式屬性方法教程： 我們在寫CSS的時候，常常會遇到讓一個圖片或一個佈局不能超出設定一定高度範圍值，有時也需要設定一個最小高度值，以達到對齊等樣式。接下來由DIVCSS5為大家總結的如何解決IE6不支援max

css clearfix(針對火狐height:auto無效解決方案)

Firefox等符合W3C標準的瀏覽器中，如果有一個DIV作為外部容器，內部的DIV如果設定了float樣式，則外部的容器DIV因為內部沒有clear，導致不能被撐開。 例： <div style=" border:2px solid #0CC; width:60

jQuery中實現不定高度height屬性過渡為auto的animate動畫

jQuery中想要用animate方法將元素的height屬性從其它值過渡到auto值，首先想到的就是 JavaScript程式碼 $(this).animate({height:'auto'}, 300); 但是並不起作用。 這時需要換一種方法，思路是： 1、首先定義變數

關於min-height注意點

方法一： min-height:160px; 設定物件box的最小高度，Firefox、IE7+適用； height:auto!important; 設定物件box的高度無自動定位，使用!important對下height高度定位設定進行優先順序提升； height:160