CSS常用布局之宽高自适应

宽度自适应

我们经常会看到这样的页面,左侧(或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小。这种布局结构可用于顶层布局结构亦可用于某个局部功能块,常见于各种web系统(OA系统,ERP系统)等。

上述的场景即是我们所说的宽度自适应。常见的有两列布局或者三列布局(甚至是多列布局)。

这里我们用三列布局来作示例,即左右两列固定,中间一列宽度自适应。

这个其实很好实现,左侧列左浮动,右侧列右浮动,中间列不浮动即可。代码如下,

<head>
<style>
    body,div {
        margin: 0;
        padding: 0;
    }
    div {
        background-color: #f00;
        height: 200px;
    }
    .left {
        float: left;
        background-color: #00f;
        width: 100px;
    }
    .right {
        float: right;
        background-color: #0f0;
        width: 100px;
    }
    .center {
        background-color: #333;
        margin: 0 100px;
        width: auto;
    }
</style>
</head>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>

效果如下,
在这里插入图片描述

上述代码在现代浏览器中是完全没有问题的,不过在IE6中有些问题,如下,
在这里插入图片描述
这个是只有IE6下才会有的问题,有个3px的bug,我们需要对各列的css代码进行一些兼容,

.left {
    float: left;
    background-color: #00f;
    _margin-right: -3px; /*for ie6*/
    width: 100px;
}
.right {
    float: right;
    background-color: #0f0;
    _margin-left: -3px; /*for ie6*/
    width: 100px;
}
.center {
    background-color: pink;
    margin: 0 100px;
    _margin: 0 97px; /*for ie6*/
    width: auto;
}

高度自适应

高度自适应的适用场景通常是这样的,顶栏(或者底栏)需要固定,剩余的部分能够根据浏览器的大小自适应其高度。

在现在浏览器中(包括IE7+,Chrome,Firefox等等),高度自适应可以利用绝对定位来解决。当一个元素的定位属性是absolute时,它将摆脱默认的文档流,其大小默认是元素内容的大小,除非手动给其设置宽高。此时我们亦可通过设置其位置属性(top,right,bottom,left)来间接改变元素的宽高。

示例代码如下,

<head>
<style>
    body,div {
        margin: 0;
        padding: 0;
    }
    .top {
        background-color: #00d;
        height: 100px;
    }
    .main {
        background-color: pink;
        position: absolute;
        top: 100px;
        bottom: 0;
        left: 0;
        right: 0;
    }
</style>
</head>
<body>
    <div class="top">top</div>
    <div class="main">main</div>
</body>

效果如下:
在这里插入图片描述
但是上述方案在IE6下是问题的(IE6真是翔一样的浏览器啊!!),如下图
在这里插入图片描述main块咋变成这样了啊?这是因为上述在现代浏览器中高度自适应的原理在IE6中并不适用。在IE6中,即使你将一个元素的定位属性设置成absolute了,此时改变其位置属性并不能改变元素的大小。

于是,在IE6中的思路就发生变化了。

在IE6中的思路是,把html和body元素的高度设定为100%,即浏览器窗口的高度,然后利用padding-top在html元素上挤出一点空间来,因为绝对定位的最高参照物是参照html元素的,所以可以把顶栏绝对定位在html的padding-top那块空间上。在IE6中,此时页面的html元素的高度并未发生变化,但是body元素的高度减小了。按照w3c的盒模型来解释,你给一个未明确宽高的元素设置内间距(padding属性),此元素将会向外膨胀撑开,使得整个元素的大小增大。但是IE6并没有按照常理出牌。

下面就是针对IE6的兼容css代码:

body,div {
    margin: 0;
    padding: 0;
}
html,body {
    _height: 100%;
}
html {
    _padding-top: 100px;
}
.top {
    background-color: #00d;
    height: 100px;
    _position: absolute;
    _top: 0;
    _width: 100%;
}
.main {
    background-color: pink;
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    _height: 100%;
    _width: 100%;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值