侧导航栏与组件重叠

Question

我在我的 Angular 项目中创建了一个固定的侧导航栏。所有其他组件都呈现在导航栏下方。如何解决这个问题。

SideNav 组件 Html

<div class="wrapper">
  <nav id="sidebar">
    <div class="menu">
      <div class="logo">
        <img src="../../assets/hotel (3).png" alt="Logo">
      </div>

      <ul>
        <li>
        <a href="#">Infomation</a>
        </li>
        <li>
        <a href="#"> Procedures</a>
        </li>
        <li>
          <a routerLink="/doctor">Hellow</a>
        </li>
        <li>
        <a href="#">Chat</a>
        </li>
        <li>
          <a href="#">Books</a>
        </li>
      </ul>

    </div>
  </nav>
</div>

SideNav.Css

.wrapper {
  display: flex;
  align-items: stretch;

}

#sidebar {
  min-width: 300px;
  max-width: 300px;
  min-height: 100vh;
  border-style: solid;
  border-width: 0 2px 0px 0px;
  border-color: lightgrey;

}

.logo {
  text-align: center;
  padding: 20% 0;

}

app-compnent.html

<app-sidemenu>

  <div class="view">
    <router-outlet></router-outlet>
  </div>

我想用我的其他组件填充那个空白区域

Answer 1

将侧边栏组件和主要内容包装在一个容器中，并将flex-grow: 1 应用于主要内容，这将占用所有空间：

/*Apply CSS reset*/ 
*{
 margin: 0;
 box-sizing: border-box;
}

/*Declare layout*/
.container{
 display: flex;
}

aside {
 width:150px;
 height: 100vh;
 background:green;
}

.view {
 flex-grow: 1;
 height: 100vh;
 background: yellow
}

<div class="container">
   <aside>Your navbar component</aside>
   <div class="view">
      ...Your router-outlet
   </div>
</div>