【发布时间】：2021-07-13 16:31:48
【问题描述】：
我正在开发一个项目，使用我想要实现如图中的布局的地方。这是我到目前为止所做的。我能够将侧边栏对齐到左侧，将标题对齐到顶部（在侧边栏后面）。但是，我无法将 contentContainer 与侧边栏对齐并位于顶部下方。我正在考虑将容器和侧边栏按 width: 20% 和 width: 80% 对齐，但侧边栏必须具有固定的宽度大小，因为我不希望在调整应用程序大小时改变宽度。
我在 contentContainer 中也有问题。我已经把它做成了一个列方向的弹性盒子。尝试将 headContent 放在 flex-start 上，将 mainContent 放在 center 上，将 footerContent 放在 flex-end 上。然而它只是行不通。供您参考，如果它很重要，它是一个 reactjs 应用程序。这是我尝试过的代码。
<div>
<div className="Topbar">
<svg viewBox="10 0 50 80">
<text y="50">Header Text</text>
</svg>
</div>
<div className="Sidebar">
<svg
id="menuitem1"
width="70"
height="100"
viewBox="0 0 70 100"
fill="#767765"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M22.4478 65.0703L21.7393 69.9057L26.6989 69.2151L47.1497 49.2776L42.8982 45.1328L22.4478 65.0703Z" />
<path d="M52.0738 44.4765C53.2459 43.3339 53.2459 41.4745 52.0736 40.3317C51.506 39.7783 50.7509 39.4735 49.9482 39.4735C49.1455 39.4735 48.3904 39.7785 47.8226 40.3319L47.1487 40.9889L51.4 45.1335L52.0738 44.4765Z" />
</svg>
<svg
id="menuitem2"
width="75"
height="78"
viewBox="0 0 75 78"
fill="#767765"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M22.4478 65.0703L21.7393 69.9057L26.6989 69.2151L47.1497 49.2776L42.8982 45.1328L22.4478 65.0703Z" />
<path d="M52.0738 44.4765C53.2459 43.3339 53.2459 41.4745 52.0736 40.3317C51.506 39.7783 50.7509 39.4735 49.9482 39.4735C49.1455 39.4735 48.3904 39.7785 47.8226 40.3319L47.1487 40.9889L51.4 45.1335L52.0738 44.4765Z" />
</div>
<div className="contentContainer">
<div className="headContent"/>
<div className="mainContent">
<input
type="text"
placeholder="Enter text here.."
className="textBox"
/>
</div>
<div className="footerContent" />
</div>
</div>
还有 CSS 文件：
.contentContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: red;
width: 100%;
height: 100%;
position: fixed;
top: 45px;
bottom: 50;
}
.Topbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
top: 0%;
height: 45px;
position: absolute;
z-index: 2;
-webkit-app-region: drag;
background:transparent;
}
svg{
font : bold 26px Century Gothic, Arial;
width : 100%;
height : 100px;
z-index: 3;
filter: drop-shadow(3px 3px 3px rgba(161, 160, 160, 0.25));
}
text{
/* fill: #de8356b8; */
fill: #f0f0ec;
stroke: rgb(40, 40, 40);
stroke-width: 0.5px;
stroke-linejoin: bevel;
}
.Sidebar {
display: flex;
flex-direction: column;
align-items: center;
justify-content:flex-start;
-webkit-app-region: drag;
width: 80px;
height: 100%;
position:fixed;
top: 0%;
left: 0%;
z-index: 2;
background: #faf9f9;
/* background: transparent; */
border-right: 0.2px solid #abababba;
/* filter: drop-shadow(0.5px 0px 1px rgba(31, 31, 31, 0.25)); */
}
#menuitem1 {
width: 30px;
height: 50px;
padding-top: 50pt;
}
#menuitem2 {
width: 30px;
height: 50px;
padding-top: 30pt;
}
.textBox {
width: 180px;
height: 180px;
filter: drop-shadow(3px 3px 3px rgba(161, 160, 160, 0.25));
}
.Content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center ;
position: fixed;
width: 80%;
height: 100%;
bottom: 30;
right: 0%;
background: #F8F8F8;
}
.headContent {
width: 100%;
height: 20%;
align-self: flex-start;
top: 20;
background-color: black;
}
.mainContent {
display: flex;
flex-direction: row;
position: fixed;
align-self: center;
justify-content: center;
align-items: center;
width: 100%;
height: 70%;
background-color: red;
}
.footerContent {
position: fixed;
align-self: flex-end;
align-items: flex-end;
width: 100%;
height: 50px;
bottom: 0;
background-color: blue;
}
请注意，我希望侧边栏的顶部栏具有固定宽度和固定高度。关于contentContainer，我希望它可以拉伸和调整大小。此外，contentContainer 中的每个孩子都应该在行轴上拥有自己的 flexbox。你可以看到我已经在上面提供的代码中尝试过了。我可能很接近，但在这里和那里遗漏了几点。感谢您的帮助。
【问题讨论】：