修复了带有标题的侧边栏.还没有找到解决方案

Question

我确实在Figma中尝试了一些设计，但现在我一直在想如何做一些事情。我想要一个固定的侧边栏，标题全宽，直到它到达侧边栏(或者至少，按钮等不应该穿过我的侧边栏(

我的设计，右侧边栏：https://i.gyazo.com/eaf28c70587ad014777f065c524c4a92.png

我现在所拥有的，正如你所看到的，标题中的div是全宽的，但在到达侧边栏之前应该是全宽：https://i.gyazo.com/a222cdaf11031095a13bfa35e3f1395a.png

我的css：

标头：

import styled from "styled-components"
export const NavWrapper = styled.nav`
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
border: solid red 1px;
color: #fdfdfd;
`

侧边栏：

export const SidebarRight = styled.div`
max-width: 100px;
height: 100%;
position: fixed;
right: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
z-index: 10;
padding: 80px 0;
border: 1px solid red;
`

或者我的风格很好吗？我应该使用不同的方法让按钮和所有完美的东西都在标题中吗

Answer 1

因此fixed从文档流中取出该项。有几种方法可以完成你想要做的事情。

如果侧边栏的宽度总是相同的，那么您可以在页眉上使用calc来表示width: calc(100% - *sidebar-width*);，但随后您将对主要内容使用相同的操作。

我建议你稍微改变一下你的结构，在整个应用程序周围放一个柔性包装器。将侧边栏与内容包装器分离，然后在该包装器中处理标题和主要内容。

这里有一个代码笔供参考：https://codepen.io/davidleininger/pen/bc3fe65aee84c21efe631492eaba7e14