网页html结构右侧栏固定，左侧自适应大小。

浏览数：67 / 时间：2015年06月09日

最近写了一个项目，写页面的结构，html树形结构是有header，container，footer部分，其中container部分是右侧栏是固定宽度，左侧是自适应宽度与屏幕高度。

第一次写的博客文章是container部分是左侧栏固定，右侧是自适应效果。左侧栏固定是很好写，但右侧栏固定却不很好写，以下是基本的结构与样式。

 <div class="container" style="overflow:hidden;">
        <div class="left leftCont">
        </div>
        <div class="right rightSide">
        </div>
</div

1.左右栏高度一定，如果仍想按照左侧固定的模式写右侧固定的效果。可以如下写：

可以看到container下的两个div进行了对调。

<style type="text/css">
       
        .rightSide {
            width: 200px;
            height: 600px;
            background: red;
            float: right;
        }
        .leftCont {
            width: 100%;
            margin-right: 200px;
            background-color: blue;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="container" style="overflow:hidden;">
        <div class="rightSide">
        </div>
        <div class="leftCont">
        </div>
    </div>
</body>

2.如果不想将两个子div进行调换位置，则可以写如下代码，

  <style type="text/css">
        .rightSide {
            width: 200px;
            height: 600px;
            background: red;
            float: right;
        }

        .leftCont {
            float: left;
            width: 100%;
            margin-right: 200px;
            background-color: blue;
            margin-bottom: -2000px;
            padding-bottom: 2000px;
        }
    </style>
</head>
<body>
    <div class="container" style="overflow:hidden;">
        <div class="left leftCont">
        </div>
        <div class="right rightSide">
        </div>
    </div>
</body>