html - 如何填充标记以填充容器中的父div

Question

我开始了一个新的 Electron 元素(Angulat 9:使用scss)，目前停留在制作自定义标题栏上。这是我的代码:

app.component.html

<div class="container">
  <app-titlebar></app-titlebar>

  <div id="router_outlet">
    <router-outlet></router-outlet>
  </div>
</div>

titlebar.component.html

html, body{
  margin: 0 ;
  padding: 0 ;
  width: 100% ;
  height: 100% ;
}



.titlebar {
  display: flex;
  position: relative;
  border: 1px solid black ; /* for reference*/
  top: 0;
  left: 0;
  justify-content: space-between;
  height: 3rem;
  flex-direction: row;
}

.window-button,
.back-button {
  font-size: 12pt;
  font-weight: lighter;
  -webkit-app-region: no-drag;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.window-button {
  padding-left: 15px;
  padding-right: 15px;
}

.back-button {
  padding-left: 17px;
  padding-right: 17px;
}

#restore {
  transform: rotate(180deg);
}

.window,
.navigation {
  display: flex;
  align-items: center;
}

.normal:hover {
  background-color: rgba(0,0,0,0.2);
}

.danger:hover {
  background-color: red;
  color: white;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="titlebar">
  <div class="navigation">
    <a class="back-button normal material-icons">arrow_back</a>
    <span class="apptitle">Electron-App</span>
  </div>
  <div class="window">
    <a class="window-button normal material-icons">remove</a>
    <a *ngIf="showMaximizeButton ; else showRestore" class="window-button normal material-icons">crop_square</a>
    <!-- <ng-template #showRestore>
      <a class="window-button normal material-icons" id="restore">flip_to_front</a>
    </ng-template> -->
    <a class="window-button danger material-icons">clear</a>
  </div>
</div>

我的问题是如何将这些 <a>标记完全填充到其父div元素的高度，以便在悬停这些链接时将背景区域完全填充到 .titlebar的高度。

Answer 1

将它们的高度设置为full，并使它们也 flex ，以允许其内容的垂直定位(它们已经设置为inline-block:

html, body{
  margin: 0 ;
  padding: 0 ;
  width: 100% ;
  height: 100% ;
}

.titlebar {
  display: flex;
  position: relative;
  border: 1px solid black ; /* for reference*/
  top: 0;
  left: 0;
  justify-content: space-between;
  height: 3rem;
  flex-direction: row;
}

.window-button,
.back-button {
  font-size: 12pt;
  font-weight: lighter;
  -webkit-app-region: no-drag;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  height: 100%;
  display: inline-flex !important;
  align-items: center;
}

.window-button {
  padding-left: 15px;
  padding-right: 15px;
}

.back-button {
  padding-left: 17px;
  padding-right: 17px;
}

#restore {
  transform: rotate(180deg);
}

.window,
.navigation {
  display: flex;
  align-items: center;
}

.normal:hover {
  background-color: rgba(0,0,0,0.2);
}

.danger:hover {
  background-color: red;
  color: white;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="titlebar">
  <div class="navigation">
    <a class="back-button normal material-icons">arrow_back</a>
    <span class="apptitle">Electron-App</span>
  </div>
  <div class="window">
    <a class="window-button normal material-icons">remove</a>
    <a *ngIf="showMaximizeButton ; else showRestore" class="window-button normal material-icons">crop_square</a>
    <!-- <ng-template #showRestore>
      <a class="window-button normal material-icons" id="restore">flip_to_front</a>
    </ng-template> -->
    <a class="window-button danger material-icons">clear</a>
  </div>
</div>