以左边侧边栏宽度固定,右边内容栏填满剩余宽度为示范:
整个容器设置相对定位。
左边侧边栏设置绝对定位,以父元素为基准进行定位,并固定宽度;右边内容栏宽度设置为100%,设置外边距margin-left
为侧边栏的宽度,因为绝对定位的元素完全脱标,不占原来位置,故内容栏是以浏览器左边框为基准偏移。但是内容栏宽度100%且里边的内容超过宽度时会出现横向滚动条,设置了overflow:hidden
之后滚动条消失,而超出浏览器宽度部分的内容不会显示。为了解决显示不完全问题,将父容器设置为弹性布局:display:flex
,则可完全显示内容。
<div class="container">
<div class