css中的min-width

我们在做布局设计时,经常有这样的布局,两边或者一边是导航类工具栏 ,中间是内容区域。

 

但我们希望中间的内区域能够自动适应,随着不同的分辨率和浏览器的大小自动适应高度和宽度,以获得较好的显示效果。

 

我们假设中间的内容区域是个div,如果我们不明确设置它样式的width属性,它是可以自动适应的,按说这满足了要求。

 

但是当浏览器的宽度过小时,小到已经不能整齐的显示我们的内容,页面的显示就会混乱不堪。

 

这时我们可以为该内容div设置一个min-width,比如在css中:

#content{
     min-width:600px;
}

 这个属性的功能就像它的名字一样简单:最小宽度。该div还是自动适应宽度,但它多了个条件,当它自适应的宽度小于设置的最小宽度时,就会把该div的宽度设置为最小宽度,不再自动适应。

 

这个属性在firefox和ie7中是可以使用的,但在ie6中不支持,我们可以用下面这段代码代替:

#content{
  _width: expression(((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700? '600px' : 'auto');
}

 前面的这段:

((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700

 只是个判定条件,判定页面body的宽度,这里的是,如果页面body的宽度小于700(这个要根据具体的页面来指定),就把content的宽度指定为600,否则就让它自适应宽度。

 

 

其实min-height也同理!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值