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

Question

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

Answer 1

왼쪽에 고정 너비가 있고 오른쪽에 적응형 너비가 있고 높이가 브라우저의 현재 높이와 일치하는 CSS를 사용하여 2열 레이아웃을 구현하는 방법은 무엇입니까? -PHP 중국어 웹사이트 Q&A-왼쪽에 고정 너비가 있고 오른쪽에 적응형 너비가 있고 높이가 브라우저의 현재 높이와 일치하는 CSS의 2열 레이아웃을 구현하는 방법은 무엇입니까? -PHP 중국어 홈페이지 Q&A

꼭 보고 배워보세요.

Answer 2

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