css手机左右固定 |css 导航栏前面加图标

html, body {
overflow-x: hidden;
}
.content {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.left-fixed {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 50px;
}
.right-fixed {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 50px;
}
.main {
position: relative;
width: calc(100% - 100px);
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

以上是该布局的核心代码，其中，大家使用position: fixed属性使左侧和右侧的元素固定在屏幕的两侧，并使用overflow: scroll属性使主要内容区域可滑动。

同时，大家还需要在html和body的样式中使用overflow-x: hidden属性，使页面在水平方向上不可滚动。

最后，大家在容器元素的样式中加入position: relative属性，让其成为左右固定元素的相对定位父元素，这样，左右固定元素的绝对定位就可以参照该容器元素了。