Home  >  Article  >  Web Front-end  >  CSS control div width max width/height and min width/height

CSS control div width max width/height and min width/height

WBOY
WBOYOriginal
2016-10-12 09:50:131354browse
In webpage production, we often need to control the div width, maximum width/height or minimum width/height. However, many friends will encounter incompatibility headaches in IE6, including me. I often encounter such problems. I searched a lot on Baidu but couldn't find a solution. I later learned about it on a forum and I would like to share with you the css3 style code. Over time, it is fully compatible with all major mainstream browsers.

* minimum width */
.min_width{min-width:300px;
/* sets max-width for IE */
_width:expression(document.body.clientWidth < 300 ? "300px" : "auto");
}

/* Maximum width */
.max_width{
max-width:600px;
/* sets max-width for IE */
_width:expression(document.body.clientWidth > 600 ? "600px" : "auto");
}

/* Minimum height*/
.min_height{
min-height:200px;
/* sets min-height for IE */
_height:expression(this.scrollHeight < 200 ? "200px" : "auto" : "auto");
}

/* Maximum and minimum width*/
.min_and_max_width{
min-width:300px;
max-width:600px;
/* sets min-width & max-width for IE */
_width: expression(
        document.body.clientWidth < 300 ? "300px" :
            ( document.body.clientWidth > 600 ? "600px" : "auto")
  );
}

/* Maximum and minimum height* /
.min_and_max_height{
min-height:200px;
max-height:400px;
/* sets min-height & max-height for IE */
_height: expression(
this.scrollHeight < 200 ? "200px" :
        ( this.scrollHeight > 400 ? "400px" : "auto")
   );
}





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