CSS 两列布局---左侧固定，右侧自适应

最新推荐文章于 2022-07-21 16:06:46 发布

indd

最新推荐文章于 2022-07-21 16:06:46 发布

阅读量5k

点赞数

分类专栏： css3 文章标签： css 布局

本文链接：https://blog.csdn.net/osdfhv/article/details/52179624

版权

css3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前端一个小面试题总结如下：
1、方法一，高度100%，左侧float，右侧自动宽度（会自动占满剩余宽度）。
2、方法二，绝对定位absolute，使用方法一的HTML结构，左侧绝对定位，拉出文档流，高度100%并设置一定宽度400px。右侧自动宽度（将占100%）并设置margin-left：400px。
3、方法三，右侧宽度与高度均100%，左侧部分float，使左侧部分被包含到右侧部分，如下面的HTML结构。
以下是代码结构：
至于其他的方法就不在写了，道理都是一样的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
    html{
         /*兼容firefox的div高度100%*/
            height: 100%
    }
    .body{
        height: 100%;
    }
        .left{
            float: left;
            width: 400px;
            height: 100%;
            /*解决IE6的3px-Bug*/
           /*IE6下当浮动元素与非浮动元素相邻时，3px的Bug就会出现，它会偏移3像素。*/
            _margin-right: -3px;
            background-color:crimson;
            border:  1px solid burlywood;

        }
        .right{
            width: auto;
            height: 100%;
            background-color: forestgreen;
            border: 1px solid burlywood;
        }
    </style>
    <body>
        <div class="left">
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
        </div>
        <div class="right">
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />
            hello,亲爱的小一姑娘
            <br />      
        </div>

    </body>
</html>

indd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 两列布局---左侧固定，右侧自适应

前端一个小面试题总结如下： 1、方法一，高度100%，左侧float，右侧自动宽度（会自动占满剩余宽度）。 2、方法二，绝对定位absolute，使用方法一的HTML结构，左侧绝对定位，拉出文档流，高度100%并设置一定宽度400px。右侧自动宽度（将占100%）并设置margin-left：400px。 3、方法三，右侧宽度与高度均100%，左侧部分float，使左侧部分被包含到右侧部分，
复制链接

扫一扫