需求:左边导航栏固定宽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;
}
js
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;