我正在尝试创建一个响应式的导航栏,类似于Stack Overflow上的导航栏。 我已经附加了一个布局图像,以显示我想要实现的布局。
为了简单起见,我添加了一些值,使其更易于跟踪。 有一个外部div,它封装整个页面,outer-wrapper
和封装主要内容(导航栏、主内容和页脚)的主div,main-wrapper
。
现在假设outer-wrapper
宽度为1000px,main-wrapper
宽度为800px,则左侧和右侧会有100px的缓冲区。 当窗口缩小时,我希望先使用缓冲区再更改任何主要内容。
CSS
.outer-wrapper {
width: 100%;
}
.main-wrapper {
width: 800px;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
position: relative;
}
.nav-home {
position: fixed;
top: -30px;
left: -30px;
height: 60px;
width: 100%;
padding: 20px 20px 0px 20px;
display: flex;
justify-content: space-around;
}
}
HTML
<div class='outer-wrapper'>
<div class='main-wrapper'>
<div class='nav-bar'>...</div>
<div class='main-content'>...</div>
<div class='footer'>...</div>
</div>
</div>
问题在于当窗口缩小到与
main-wrapper
的宽度匹配时,导航栏仍然具有左右边距。我该如何确保当左右边距缩小为0时,导航栏的宽度与主内容和页脚的宽度匹配?谢谢。