html+css页面布局之左侧固定并有边框

页面布局，如果是上中下布局，中间主体部分是左右两栏结构，左侧通常是菜单栏，右侧就是页面主体。

这种布局可以考虑左侧浮动+固定宽度，右侧使用margin-left，也可以使用flex布局，这里的示例使用的是flex布局。

.content{display:flex;}
.content .grid-left{float:left;flex:none;border-right:1px solid #ddd;}
.content .grid-right{flex:1;float:right;overflow:hidden;}

这个布局方式解决了左右布局的问题。

通常，我们是希望左右是分开的，即左侧菜单栏右侧会有一个边框，这个边框在左侧菜单多的时候，可以保证和页面高度一致，但是内容少的时候，撑不起来，这样边框就很丑。

以前都是通过js来解决这种问题，就是计算页面高度，然后动态算出主体部分高度，通过js的方式设置左侧高度，这样，边框就能拉到页面底部。

 今天学到了一招：设置左侧样式的伪类，代码如下：

.content .grid-left:before{
    content:"";
    display: block;
    width: 180px;
    position: fixed;
    bottom:0;top:0;
    z-index:-1;
    border:1px solid #ccc;
    border-width: 0 1px 0 0;
}

确实能够达到效果：

前端学习，需要积累，每天进步一点点。