javascript - css如何实现两栏布局,左边固定宽度,右边宽度自适应,且高度和浏览器当前高度一致
本文介绍了javascript - css如何实现两栏布局,左边固定宽度,右边宽度自适应,且高度和浏览器当前高度一致的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
无论浏览器宽度怎么改变,都保证左边这个div宽度固定为300px,右边宽度随浏览器宽度自适应,且两个div的高度和浏览器当前高度一致
解决方案
#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; *//* 解开此处注释来查看效果 */
}
这篇关于javascript - css如何实现两栏布局,左边固定宽度,右边宽度自适应,且高度和浏览器当前高度一致的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文