时间戳

首页 > 解决方案 > 在 2 个固定块之间创建一个块

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

问题描述

这是一个嵌入电子的角度应用程序。
我有 2 个街区

我想有一个由widthand的其余部分分隔的内容区域height。这是我的代码：

#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>

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

应用程序

标签： htmlcss

解决方案

用于box-sizing: border-box;将边框包含在 100% 的宽度和高度中，并使用calc(...)forwidth和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>

推荐阅读