如何填充 <a> 标签以填充容器内的父 div

Question

我开始了一个新的电子项目（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 并使它们也可以弯曲以允许其内容的垂直定位（它们已经设置为 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>

Answer 2

你可以让锚标签使用display: flex:

.titlebar a,
.window a {
  height: 100%;
  display: flex;
  align-items: center;
}

这是工作的 sn-p：

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;
}

.titlebar a,
.window a {
  height: 100%;
  display: flex;
  align-items: center;
}

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<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>