CSS 两列布局---左侧固定，右侧自适应-蒲公英云

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

前端一个小面试题总结如下：
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>