CSS常用布局之宽高自适应

最新推荐文章于 2024-01-13 21:23:31 发布

Limit@AI

最新推荐文章于 2024-01-13 21:23:31 发布

阅读量619

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_55817753/article/details/116500696

版权

宽度自适应

我们经常会看到这样的页面，左侧（或者右侧）为固定的导航或者菜单栏，另一侧将会随着浏览器的缩放而自适应改变其大小。这种布局结构可用于顶层布局结构亦可用于某个局部功能块，常见于各种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%;
}

Limit@AI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS常用布局之宽高自适应

宽度自适应我们经常会看到这样的页面，左侧（或者右侧）为固定的导航或者菜单栏，另一侧将会随着浏览器的缩放而自适应改变其大小。这种布局结构可用于顶层布局结构亦可用于某个局部功能块，常见于各种web系统（OA系统，ERP系统）等。上述的场景即是我们所说的宽度自适应。常见的有两列布局或者三列布局（甚至是多列布局）。这里我们用三列布局来作示例，即左右两列固定，中间一列宽度自适应。这个其实很好实现，左侧列左浮动，右侧列右浮动，中间列不浮动即可。代码如下，<head><style>
复制链接

扫一扫