Home  >  Article  >  Web Front-end  >  CSS实现兼容所有浏览器具有最小高度且自适应的div_html/css_WEB-ITnose

CSS实现兼容所有浏览器具有最小高度且自适应的div_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:31:001290browse

CSS实现兼容所有浏览器具有最小高度且自适应的div:
有时候我们希望能够给div一个最小高度,如果内容没有达到这个最小高度,div就以最小高度显示,如果内容超出了这个最小高度的话,就会实现自适应效果,虽然当前有min-height属性,但是并不是所有浏览器都能够支持,尤其是低版本的IE浏览器,下面是一段能够兼容所有浏览器的代码实例。
代码如下:

 

<!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语法规则一章节。 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11567

更多内容可以参阅:http://www.softwhy.com/divcss/

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn