CSS相容各瀏覽器最小高度且能夠自適應程式碼

admin發表於2017-02-23
CSS瀏覽器

在實際應用中，往往需要給容器規定一個最小高度，如果內容沒有達到此高度，那麼就以此最小高度顯示，如果內容超出規定的最小高度，則高度自適應，由於瀏覽器相容性問題，所以單純使用min-height屬性無法相容所有瀏覽器，下面是一段能夠相容所有主流瀏覽器程式碼例項，供大家借鑑參考。

程式碼例項如下:

[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; 
  background-color:green; 
} 
#inner{
  width:150px;
  height:300px;
  margin:0px auto;
  background-color:red;
}
</style> 
</head> 
<body>
<div id="box">
  <div id="inner"></div>
</div> 
</body> 
</html>

相關文章