CSS 分栏结构

CSS 固定左侧导航栏

left----左侧菜单

cont -- 实际内容

right  ---右侧附加内容

 

两栏布局---左侧高度为内容撑开的高度

    方法一：【坏处是需要 float】

    left: position: fixed; /  display: list-item ;    width: 150px;float: left; height: 100%;

    cont :  margin-left: 170px;  【position: relative;   可以不要】

因为此方法中，left 已经使用了 position: fixed ； 则左侧菜单的高度自由/ 100% 。对 cont 没有影响。 

 

    方法二： 【 table  好处是不用 float 】

    left-01:  display: inline-table  /   inline-block / table /  table-cell  / list-item ; width: 150px;  给成内联可定宽度的元素即可

    cont-01:  position: absolute; right: 0; left: 170px; right:0;  当左侧菜单高度不固定时使用。 ---占用剩余空间  【可以有也可以没有 display: table-cell 】

 

    left-01:  display: inline-table  /   inline-block / table /  table-cell  / list-item ; width: 150px; height: 100%;  position: fixed;

    cont-02:   直接  margin-left : 170px; 即可 ----当左侧菜单高度 height: 100%, position: fixed 时使用；

 

    方法三：

    外层 div  加入  display: flex  ---弹性盒模型。默认横向排列。

    left:  flex: 30%;

    right: flex: 70%