Home  >  Q&A  >  body text

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

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

橱窗的光橱窗的光2806 days ago1176

reply all(2)I'll reply

  • 数据分析师

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

    How to implement a two-column layout in css, with a fixed width on the left and an adaptive width on the right, with the height consistent with the current height of the browser? -PHP Chinese website Q&A-How to implement a two-column layout in CSS, with a fixed width on the left and an adaptive width on the right, with the height consistent with the current height of the browser? -PHP Chinese website Q&A

    Let’s take a look and learn.

    reply
    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; *//* 解开此处注释来查看效果 */
    }

    reply
    0
  • Cancelreply