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

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

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

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/

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn