网页中最小高度问题

作者:shona 日期:2009-05-18

字体大小: 小中大

设计网站经常会遇到最小高度问题内页内容中如果内容少footer随之会上去整个页面很不协调
解决这个问题可以利用min-height
min-height就是你的层的最小高度，如果该层中的元素内容高度小于这个高度，就将层显示为
min-height的值超过的话，就撑破层，使层的高度与元素内容高度一样。
这2个样式仅对IE 7.0和firefox2.0以上版本的浏览器有效！
ie6就使用这一句代码height:expression(this.scrollHeight < 200 ? "200px" : "auto");

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

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

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

/* 最大高度 */
.max_height{
  max-height:400px;
  /* sets max-height for IE */
height:expression(this.scrollHeight > 400 ? "400px" : "auto");
}

/* 最大最小寬度 */
.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")
  );
}

/* 最大最小高度 */
.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")
  );
}