CSS實現相容所有瀏覽器具有最小高度且自適應的div

admin發表於2017-02-23
CSS瀏覽器
有時候我們希望能夠給div一個最小高度，如果內容沒有達到這個最小高度，div就以最小高度顯示，如果內容超出了這個最小高度的話，就會實現自適應效果，雖然當前有min-height屬性，但是並不是所有瀏覽器都能夠支援，尤其是低版本的IE瀏覽器，下面是一段能夠相容所有瀏覽器的程式碼例項。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#box { 
  width:200px; 
  height:auto!important; 
  height:200px; 
  min-height:200px; 
  border:1px solid green; 
}
#inner{
  width:100px;
  height:300px;
  background-color:red;
  margin:0px auto;
} 
</style> 
</head> 
<body> 
<div id="box">
  <div id="inner"></div>
</div> 
</body> 
</html>

以上程式碼實現了此要求，比較簡單，直接套用就可以了。

相關閱讀:

（1）.min-height屬性可以參閱CSS min-height一章節。 

（2）.!important屬性可以參閱CSS !important語法規則一章節。 

相關文章