html - 在 2 个固定 block 之间创建一个 block

Question

这是一个嵌入了 Electron 的 Angular 应用程序。
我有 2 个积木

• title-bar position: fixed
• 导航栏 position: fixed

我想要一个由剩余的宽度和高度分隔的内容区域。这是我的代码:

#app-content {
  position: fixed;
  margin-left: 27px;
  margin-top: 20px;
  width: 100%;
  height: 100%;
  overflow: auto;
  border:5px solid #ce2e2e;
  background-color: white;
}

<app-title-bar></app-title-bar>
<app-navigation-bar></app-navigation-bar>
<div id="app-content">
  <router-outlet></router-outlet>
</div>

我得到了以下结果。左边距和顶部边距使 block 在底部和右侧溢出。 我该如何解决？我已经尝试将边距放在底部和右侧，但没有任何反应。

Answer 1

使用box-sizing: border-box;将边框包含在100%宽高中，使用calc(...) width 和 height 如下所示，将您的边距包括在 100% 中:

html, body {
 margin: 0;
}
#app-content {
  position: fixed;
  box-sizing: border-box;
  margin-left: 27px;
  margin-top: 20px;
  width: calc(100% - 27px);
  height: calc(100% - 20px);
  overflow: auto;
  border:5px solid #ce2e2e;
  background-color: white;
}

<app-title-bar></app-title-bar>
<app-navigation-bar></app-navigation-bar>
<div id="app-content">
  <router-outlet></router-outlet>
</div>