首頁  >  問答  >  主體

css如何实现两栏布局,左边固定宽度,右边宽度自适应,且高度和浏览器当前高度一致?

无论浏览器宽度怎么改变,都保证左边这个div宽度固定为300px,右边宽度随浏览器宽度自适应,且两个div的高度和浏览器当前高度一致

橱窗的光橱窗的光2806 天前1174

全部回覆(2)我來回復

  • 数据分析师

    数据分析师2017-10-01 00:42:43

    css如何實現兩欄佈局,左邊固定寬度,右邊寬度自適應,且高度和瀏覽器當前高度一致? -PHP中文網問答-css如何實現兩欄佈局,左邊固定寬度,右邊寬度自適應,且高度和瀏覽器當前高度一致? -PHP中文網問答

    圍觀一下哦,學習一下。

    回覆
    0
  • 迷茫

    迷茫2017-03-06 10:02:49

    #left {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 300px;
        /* background: blue; *//* 解开此处注释来查看效果 */
    }
    
    #right {
        position: fixed;
        left: 300px;
        top: 0;
        height: 100vh;
        width: calc(100vw - 300px); 
        /* 如果浏览器不支持CSS3 calc方法,可以使用js计算宽度 */
        /* background: red; *//* 解开此处注释来查看效果 */
    }

    回覆
    0
  • 取消回覆