面试准备（一）---左固定右自适应布局

左固定右自适应布局

这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 
现在我们来看下HTML布局：

<div id="outer">

  <div id="sidebar" style="height:240px;">固定宽度区</div>

  <div id="content" style="height:340px;">自适应区</div>

</div>

<div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>

下面讲一下常见的方法： 
1、将左侧div浮动，右侧div设置margin-left。

       .sidebar{

            width: 300px;

            height: 300px;

            background-color: pink;

            float:left;

        }

        .content{

            margin-left: 300px;

            height: 100px;

            background-color: blue;

        }

        .footer{

            background-color: red;

        }

        .outer:after{

            display: block;

            content:'';

            clear: both;

            visibility: hidden;

        }

        .outer{

            zoom:1;

        }

 

大家要注意html中必须使用div标签，不要妄图使用什么p标签来达到目的。因为div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度。这里的content就是例子。

当然我们不能让他填满了，填满了他就不能和sidebar保持同一行了。我们给他设置一个margin。由于sidebar在左边，所以我们设置content的</