以左边侧边栏宽度固定，右边内容栏填满剩余宽度为示范：
整个容器设置相对定位。
左边侧边栏设置绝对定位，以父元素为基准进行定位，并固定宽度；右边内容栏宽度设置为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. 设置弹性布局后
