CSS响应式布局遇到的小问题总结

• 出现滚动条后高度被挤，缩小页面显示水平滚动条，隐藏垂直滚动条

body{
    min-width: 1200px;
    overflow-x: auto;
    overflow-y:hidden;
}

• 设置100%铺满时，缩放浏览器出现水平滚动条时，滚动条超出的部分背景图没有铺满

.father{
    width:1200px;
}
.son{
    width:100%;
    min-width:max-content;
}

• fixed定位的导航条实现滚动，只需计算需要偏移的距离

//vue3获取元素节点
const divRef = ref()
window.onscroll = function () {
  let scroll_left = -Math.max(document.body.scrollLeft, document.documentElement.scrollLeft)
  headerRef.value.style.left = scroll_left + 'px'
}