null - 程序员宅基地

flex两列布局，左边固定（可折叠），右边自适应_实现左侧展开折叠右侧自适应-程序员宅基地

需求：左边导航栏固定宽200px，并且导航栏可折叠隐藏，右边自适应，填充剩余的宽度.
html:

<div class="body">
        <div class="sidebar">
            <div class="bar" id='bar'>
                bar
            </div>
            <button id="btn" class="toglebtn">toggle</button>
        </div>
        <div class="main">main</div>
    </div>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.body {
    display: flex;
    width: 100%;
    height: 100vh;
    background-color: #ededed;
    border: 3px solid darkblue;

}

.sidebar {
     position: relative;
     display: inline-block;
     height: 100%;
}

.bar {
     width: 200px;
     height: 100%;
     background-color: yellow;
     border: 3px solid red;
}

.toglebtn {
     position: absolute;
     top: 200px;
     left: 100%;
}

.main {
    color: white;
    display: inline-block;
    width: 100%;
    background-color: blue;
    border: 3px solid red;
}

var btn = document.getElementById('btn');
var bar = document.getElementById('bar');

btn.addEventListener('click', function () {
    
     var display = bar.style.display;
     if (display != 'none') {
         bar.style.display = 'none';
     } else {
         bar.style.display = 'block';
     }
}, false)

效果图，随着浏览器视区的变化，右边main的宽度不断变化，并且，左边导航栏的隐藏，main也会发生变化
这里写图片描述

flex属性是弹性布局，当body的布局为弹性布局时，则当main的宽度当小于剩余宽度，则为实际宽度，大于等于剩余宽度，则为剩余宽度；
例如：剩余宽度为800px,main的实际宽度为600px,则渲染出来的宽度为600px,但是当缩小视区的宽度为500px时，这时渲染的main的实际宽度为500px;

本文链接：https://blog.csdn.net/zhy13087344578/article/details/80520799

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

AndroidStudio无代码高亮解决办法_android studio 高亮-程序员宅基地

文章浏览阅读2.8k次。AndroidStudio 升级到 4.2.2 版本后，没有代码高亮了，很蛋疼。解决办法是：点开上方的 File，先勾选 Power Save Mode 再取消就可以了。_android studio 高亮

swift4.0 valueForUndefinedKey:]: this class is not key value coding-compliant for the key unity.'_forundefinedkey swift4-程序员宅基地

文章浏览阅读1k次。使用swift4.0整合Unity出现[ valueForUndefinedKey:]: this class is not key value coding-compliant for the key unity.'在对应属性前加@objc 即可。或者调回swift3.2版本_forundefinedkey swift4

Spring Security2的COOKIE的保存时间设置_springsecurity 设置cookie失效时间-程序员宅基地

文章浏览阅读1.3k次。http auto-config="true" access-denied-page="/common/403.htm"> intercept-url pattern="/login.**" access="IS_AUTHENTICATED_ANONYMOUSLY"/> form-login login-page="/login.jsp" defau_springsecurity 设置cookie失效时间

view滑动冲突解决实战篇2（外部拦截法）_viewpage2外部拦截事件-程序员宅基地

文章浏览阅读1.1k次。继上篇内部拦截法需求还是跟上篇一样。只不过这次用外部拦截法来解决；只要在父容器添加如下代码就可以解决了滑动冲突，很简单，套模板就行 // 分别记录上次滑动的坐标(onInterceptTouchEvent) private int mLastXIntercept = 0; private int mLastYIntercept = 0; @Override public bo_viewpage2外部拦截事件

汇编堆栈变量存储指针_汇编语言栈指针-程序员宅基地

文章浏览阅读2.5k次，点赞7次，收藏9次。本文章系作者原创，未经许可，不得转载。汇编堆栈变量存储指针先说栈的概念，栈其实也是一种。。。。。先说内存的概念吧。。。。。额先说计算机吧，简单来说的话，可以把计算机理解成由CPU，内存，硬盘组成，而CPU内部又包括一种叫做内部寄存器的东西，包括数据寄存器： AX,BX,CX,DX；段寄存器： CS,DS,ES,SS；指针与变址寄存器SP,BP,SI,DI； ..._汇编语言栈指针

架构师之路：从码农到架构师你差了哪些_web架构师-程序员宅基地

文章浏览阅读1w次，点赞14次，收藏56次。转载自架构师之路：从码农到架构师你差了哪些 Web应用，最常见的研发语言是Java和PHP。后端服务，最常见的研发语言是Java和C/C++。大数据，最常见的研发语言是Java和Python。可以说，Java是现阶段中国互联网公司中，覆盖度最广的研发语言，掌握了Java技术体系，不管在成熟的大公司，快速发展的公司，还是创业阶段的公司，都能有立足之地。有..._web架构师

flex两列布局，左边固定（可折叠），右边自适应_实现左侧展开折叠右侧自适应-程序员宅基地

智能推荐

AndroidStudio无代码高亮解决办法_android studio 高亮-程序员宅基地

swift4.0 valueForUndefinedKey:]: this class is not key value coding-compliant for the key unity.'_forundefinedkey swift4-程序员宅基地

Spring Security2的COOKIE的保存时间设置_springsecurity 设置cookie失效时间-程序员宅基地

view滑动冲突解决实战篇2（外部拦截法）_viewpage2外部拦截事件-程序员宅基地

汇编堆栈变量存储指针_汇编语言栈指针-程序员宅基地

架构师之路：从码农到架构师你差了哪些_web架构师-程序员宅基地

随便推点

超级简单的Python爬虫入门教程(非常详细)，通俗易懂，看一遍就会了_爬虫python入门-程序员宅基地

python怎么输出logistic回归系数_python - Logistic回归scikit学习系数与统计模型的系数 - SO中文参考 - www.soinside.com...-程序员宅基地

VS2017、VS2019配置SFML_vsllfqm-程序员宅基地

vc——类似与beyondcompare工具的文本比较算法源代码_byoned compare 字符串比较算法-程序员宅基地

aetna java_pom.xml-程序员宅基地

生成随机数_<math.h>随机数-程序员宅基地

推荐文章

热门文章

相关标签