如何填充<a>标记以填充容器中的父div

debugcn 发表于 Dev

分裂细胞9

我开始了一个新的电子项目（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高度。

卢卡斯·弗林特（Lucas Flint）

将其高度设置为全高，并使其也弯曲以允许其内容的垂直定位（它们已经设置为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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。