layout布局一之左右两栏布局

说明：
1)左侧菜单上下抵满屏幕，右侧内容让出左侧菜单宽度
2)高度自适应

效果图：（加了一个header）

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .header{
              background-color: #23262E;
              z-index: 1000;
              height: 60px;
              position: relative;
            }
            .aside{
              position: fixed;
              left: 0;
              top: 60px;
              bottom: 0;/*保证上下充满的关键*/
              z-index: 999;
              width: 200px;
              overflow-x: hidden;
              background-color: #393D49;
            }
            .content{
              position: absolute;
              left: 200px;
              right: 0;
              top: 60px;
              bottom: 0;
              z-index: 998;
              width: auto;
              overflow-y: auto;
              box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="header"></div>
            <div class="aside">
                <div>sdsds</div>
            </div>
            <div class="content">
                <div>body</div>
            </div>
        </div>
    </body>
</html>

另，较为简单的浮动实现左右布局
html：
<div>

<div class="left">left</div>
<div class="right">right</div>

</div>

css:
.left {

float: left;
width: 200px;

}
.right {

margin-left: 200px;

}

layout布局一之左右两栏布局

charlotteeeeeee

引用和评论

git 的版本回退

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

Jerry和您聊聊Chrome开发者工具