作者:手机用户2502861905 | 来源:互联网 | 2023-02-03 06:07
作为一名合格的前端程序员,各种布局方式是肯定要熟练的,可我就是这么一个不合格的前端,这里记录一下左右布局的实现思路
- 父元素容器设置固定高度,设置flex ,宽度可以设为100%或者具体像素,根据业务需求来定
- 父元素下有两个子元素,分别为左右容器
- 左容器或右容器均可以设置固定宽度(如果仅是左右布局,可设置一个宽,另一方flex设为1),高度为100%父级高度,纵向溢出自动
- 补充说明:当然了,你想自己自定义滚动条的样式也是可以的
具体代码如下:
2++
2++
2++
2++
2++
2++
2++
2++
2++
2++
2++
2++
.layout{width: 100%;height: 100vh;display: flex;
}
.aside{width: 300px;height: 100%;overflow-y: auto;}
.article{flex: 1;height: 100%;overflow-y: auto;background-color: #09f;}