CSS 分欄結構
阿新 • • 發佈:2019-01-03
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%