css 两栏自适应布局--左边固定宽度右边自适应

1.两栏或者多栏自适应布局

　　首先要利用块级元素自动填充一行的概念，先用一个div元素占领一行，并通过margin-left给左边留下固定宽度

　　然后将左栏设定宽度，并用负的margin-left将其顶入到左栏，然后使用position:absolute或者float-left将其提出文档流

　　然后两栏就形成了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script type="text/css">
    div.main{
      outline:1px solid red;
      margin-left:200px;
    }
    div.aside{
      width:200px;
      margin-left:-200px;
      background-color:blue;
      height:400px;
      position:fixed;
    }
    div.content{
      background-color:yellow;
      height:600px;
    }
    div.footer{
      position:fixed;
      width:100%;
      bottom:0;
      height:100px;
      background-color:pink;
    }
  </script>
</head>
<body>
<div class="main">
  <div class="aside">dsadsad</div>
  <div class="content">dasfa</div>
</div>
  <div class="footer"></div>
</body>
</html>

css 两栏自适应布局--左边固定宽度 右边自适应

css 两栏自适应布局--左边固定宽度右边自适应