css兼容所有浏览器的宽度计算方法,非calc

作为一个前端,所见的最多的就是左右布局的情况,无论框架还是各种写法中都有左右布局,然而有些情况下非常让人头疼,那就是一侧固定宽度,另一侧根据屏幕或者外层宽度自动适应,例如表单:
《css兼容所有浏览器的宽度计算方法,非calc》

如图所示:左右布局,但是左侧按照百分比排版的,在屏幕小的情况下非常拥挤,在屏幕宽的时候非常宽松,不能够做到左边固定宽度(因为左侧是固定的几个文字),右侧自动适应。类似问题还有N多,比如后台界面左右布局形式,tab选项卡左右布局形式等等。

一、使用JavaScript来计算的弊端

  1. 麻烦,写一大堆,然后不一定对。
  2. 效率低,改变屏幕或者改变外层div宽度,效率极低。
  3. 样式和JavaScript不分开,非常不规整。

二、使用css3的calc计算的弊端

弊端:一言以蔽之,兼容性不好
优点:简单易用,效率高,能解决兼容性是最好不过了,能不能使用css2.0来写出这个效果呢,答案是能!

三、使用定位法实现calc

《css兼容所有浏览器的宽度计算方法,非calc》

具体的布局如上,父元素定位,左侧固定宽度的元素定位,右侧自动适应宽度,使用padding来撑开被定位元素占有的那部分,这样就能达到右侧宽度根据父元素的宽度适应,而且左侧达到固定宽的效果。左右颠倒亦如此。
优点:

  1. 兼容所有浏览器
  2. 容易理解,效率高

注意:
盒子的整体高度,是那个非定位元素撑开的,所以在书写的过程中一定要注意谁撑开的整个父层,如此例中,如果右侧高度很低,那么左侧因为定位是无法撑开的(左侧也可考虑使用绝对定位,或者使用min-height等,大家可以试验一下。)。

    原文作者:东搞西搞
    原文地址: https://segmentfault.com/a/1190000010806965
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞