页面莫名其妙多了一处空白

Z时代
2024-01-10
分类：技术分享

我这里应该是和右边对齐的，
但是不知道为什么会有一坨空白？
设置浮动或者设置top都无效，
最后把margin-top: -350px;改成负数。就可以把下面的模块提上去了。不知道为什么？

如图

回答

emm 最大的可能，你的右边的 sider 是不是丢 float 了？然后没有清理浮动
或者过控制台看一下是哪个元素占据的位置！

推荐使用 flex 的盒模型，
讲道理页面的元素结构大约是
nav+content>main+sider

    // 导航栏，按你期望的来
    .nav{..}
    // 滚动条的容器
    .content{
        position: relative
    }
    //
    .main{
        width: 100%  
        padding: 0 ***,  // 至少等于你 sider 的宽度
        margin: 0 auto,
    }
    // 右侧侧边栏
    .sider{
        position: flex; // 固定显示位置
        width: ***    }