以左边侧边栏宽度固定,右边内容栏填满剩余宽度为示范:
整个容器设置相对定位。
左边侧边栏设置绝对定位,以父元素为基准进行定位,并固定宽度;右边内容栏宽度设置为100%,设置外边距margin-left
为侧边栏的宽度,因为绝对定位的元素完全脱标,不占原来位置,故内容栏是以浏览器左边框为基准偏移。但是内容栏宽度100%且里边的内容超过宽度时会出现横向滚动条,设置了overflow:hidden
之后滚动条消失,而超出浏览器宽度部分的内容不会显示。为了解决显示不完全问题,将父容器设置为弹性布局:display:flex
,则可完全显示内容。
<div class="container"><div class="sidebar"><p>侧边栏固定宽度</p></div><div class="content"><p>内容栏填满剩余宽度</p></div></div>
* {margin: 0;padding: 0;height: 100%;overflow: hidden;}.container {position: relative;display: flex;width: 100%;height: 100%;}.sidebar {position: absolute;width: 100px;height: 100%;top: 0;left: 0;background-color: green;}.content {width: 100%;height: 100%;margin-left: 100px;background-color: blue;}
效果对比:
图1. 未设置弹性布局内容显示不完全
图2. 设置弹性布局后