css如何实现两栏布局,左边固定宽度,右边宽度自适应,且高度和浏览器当前高度一致?
橱窗的光
橱窗的光 2017-03-06 10:01:55
[CSS讨论组]

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

橱窗的光
橱窗的光

全部回复(2)
数据分析师

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

围观一下哦,学习一下。

迷茫
#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; *//* 解开此处注释来查看效果 */
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号