左栏固定，右栏自适应

Posted 2020-10-22 张若昀的小迷妹

方法1：

<style>

        body{ margin:0; height:100%}

        html{ height:100%} /*兼容firefox的div高度100%*/

        #left{ position:absolute; top:0; left:0; width:200px; height:100%; background-color:#CCCCCC}

        #right{ margin-left:200px; height:100%; background-color:#0099FF}

</style>

方法2：

<style>

        body{ margin:0; height:100%}

        html{ height:100%} /*兼容firefox的div高度100%*/

        #left{ width:150px; height:100%; float:left;  ">#right{ height:100%; background-color: green }

</style>

方法3：

<style>

        body{ margin:0; height:100%}

        html{ height:100%} /*兼容firefox的div高度100%*/

        #left{ width:200px; height:100%; background-color:#CCCCCC; float:left}

        #right{ width:100%; height:100%; background-color:#0099FF}

</style>