Html 使柔性容器受窗口高度限制

我正在尝试制作一个web应用程序，它占据整个窗口，并使用自己的内部滚动机制。我不希望任何内容位于浏览器窗口之外

现在我正在尝试使用一个布局，它包含一个flex容器，设置为flex columns，它有一个固定的标题导航栏，然后是一个显示动态数据的内容区域，该区域将有一个滚动条来查看内容溢出。这样，第二个标题将始终位于页面上。我使用Angular来实现这一点，因为正在路由的组件在头和content

div

s之前向DOM添加了另一个级别，所以flex容器不会限制它们的高度

.page{
显示器：flex；
柔性流动：柱；
身高：100%；
最大高度：100vh；
}
.标题{
flex:150px；
边框：3倍纯红；
}
.集装箱{
显示器：flex；
flex:1自动；
柔性流动：柱；
填充：20px；
}
.动态内容{
flex:1自动；
边框：3件纯蓝；
溢出y：滚动；
显示器：flex；
柔性流动：柱；
}
.项目{
字体大小：40px；
}

头
副标题
项目
项目
项目
项目
项目
项目
项目
项目

我不确定我是否正确理解了您的意思，但我相信我已经理解了，下面您可以看到您的问题的解决方案

关键部分 这里的关键是将

高度：100vh

添加到

.page

，这样它就不会超过视点的高度

.page {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

一小条

正文{
保证金：0；
}
.第页{
显示器：flex；
柔性流动：柱；
高度：100vh；
}
.标题{
flex:150px；
边框：3倍纯红；
}
.集装箱{
显示器：flex；
flex:1自动；
柔性流动：柱；
填充：20px；
框大小：边框框；
}
.动态内容{
flex:1自动；
边框：3件纯蓝；
溢出y：滚动；
显示器：flex；
柔性流动：柱；
}
.项目{
字体大小：40px；
}

头
副标题
项目
项目
项目
项目
项目
项目
项目
项目

我试图理解预期结果

在您的代码中，您润滑FlexBox，但忘记了包装器

。角度布线组件

，您从此失去了flex模型的好处

我已删除并更新了一些值。（没有

max height

，但只有

height

，并且

flex

减少到一个足以填满剩余空间的值。（

flex:1；

），还添加了一些

overflow:hidden

，以便稍后触发滚动）

.page{
显示器：flex；
柔性流动：柱；
高度：100vh；/*更新*/
溢出：隐藏；/*更新*/
}
正文{/*更新*/
保证金：0；
}
.标题{
最小高度：50px；/*更新，无弹性规则*/
边框：3倍纯红；
}
.container、.angular routed component{/*此处的规则与angular子组件相同*/
显示器：flex；
flex:1；/*更新*/
柔性流动：柱；
填充：20px；
溢出：隐藏；/*更新*/
}
.动态内容{
flex:1；/*更新*/
边框：3件纯蓝；
溢出y：滚动；
显示器：flex；
柔性流动：柱；
}
.项目{
字体大小：40px；
}

头
副标题
项目
项目
项目
项目
项目
项目
项目
项目

我已经解决了我的问题，发现这不是CSS问题，而是我对angular router构造DOM的方式的误解

插入的组件标签必须设置

display:flex

。直接向组件的标记添加样式的方法是使用CSS选择器：

：host

，在我的例子中，我必须使用

：host{display:flex}

，以使其正常工作

---

我问了我的第一个问题，认为这个问题与我的CSS有关，并对其进行了编辑以匹配我的特定问题

如果您想通过视口高度限制它，只需使用

max height:100vh

@Terry，这在本例中非常有效，我认为我过于简化了。我使用的是angular，DOM略有不同。我将编辑问题。我已编辑我的问题。你的回答确实适用于我提供的示例，但不适用于我的实际应用程序。应用程序使用的是角度组件和路由组件，我认为问题实际上在于角度在路由器端点插入DOM对象的方式。问题在于

。角度路由组件

是角度插入组件，您无法将样式直接应用于该DOM元素。@MasonSurvey您确定吗？一旦它在文档的dom中，一旦类名匹配，样式中的css就会应用到它，否则，您要么类名错误，要么会覆盖样式。如果它确实覆盖了规则，我想到了2个选项：a）增加选择器的权重b）或者一旦加载了angular脚本，就通过javascript更新该元素的样式。我会避免

！重要信息

，请保持其清洁。最好是为该元素使用

id

，如果它确实有一个。如果没有，就动态添加它，让CSS出现在样式表中。增加权重也可以，但我发现直接将样式应用到组件的最直接方法是使用angulars:hostselector@MasonTurvey无论您使用何种方法，关键是要将此组件包含到flexbox布局中，如果希望级联工作，则没有选择；）这是一个CSS问题，层叠样式表，层叠在组件显示为非样式的级别被破坏：）。您必须对其进行样式设置，并将其包含到flexbox布局中。。。。