Html “的价值”；宽度=100%“；在“角度”中，WebApp小于实际浏览器宽度

我正在开发一个Angular应用程序，目前遇到了一个问题，我的Angular应用程序的最大宽度比它应该的小，我不明白为什么。出于几个原因，我只能展示部分代码，但我会尽最大努力包含关键部分

这一切都始于我在应用程序中添加了一个

display:flex

，因为我希望页脚和页眉都是粘性的，而正文内容应该是可滚动的。为此，我在我的

样式中添加了以下内容。scss

：

.container {
  width: 100%;
  height: 99.9%;
  display: flex;
  flex-direction: column;
}
.header {
  flex-shrink: 0;
  flex-grow: 0;
}
.content {
  flex-shrink: 1;
  flex-grow: 1;
  position: relative;
  overflow-y: auto;
}

.footer {
  flex-shrink: 0;
  flex-grow: 0;
}

我的app.component.html现在看起来像这样：

<div class="container">
    <div class="header">
        <app-header></app-header>
    </div>
    <div class="content">
        <router-outlet></router-outlet>
    </div>
    <div class="footer">
        <app-footer></app-footer>
    </div>
</div>

这实现了我想要的，但有一个副作用，现在我的应用程序有一个固定的最大宽度，我似乎无法左右。我查看了Firefox中的开发控制台，它显示我的

html

和

body

尺寸是1920 x高度。但是，我的

应用程序根目录

的维度只有1530 x高度

在我添加

display:flex

之前，宽度维度工作得非常好。我现在是否错过了一些明显的东西？

可能是全局设置：

* {
  margin: 0;
  padding: 0;
}

---

“但是，我的应用程序根目录的维度只有1530 x高度。”-以及应用于此元素的格式是什么？查看是否包含bootstrap.css-查看bootstrap.css包含mediaquerys到容器-并且mediaqueries比单个值更“具体”。你可以在这个愚蠢的堆栈闪电战中看到：你的代码起作用了：提示：将你的类重命名为

自定义容器

，如果所有其他操作都失败了

min width:100%

可能是最后一个办法，看看是否有任何元素相互限制。@Eliseo你的提示重命名为

自定义容器

实际上解决了我的问题，谢谢你能给我解释一下为什么需要将它重命名为除

容器

以外的名称吗？@hullunist，因为你有import bootstrap.css你有一个类似

@media（最小宽度：1920px）{.container{max width:1530px；}

的.css，但是“max width”比你的宽度更大-我不太确定如果你声明

.container{max width:100%；}

并在导入bootstrap.css后放入你的.css，是否也能解决你的问题-