使伸缩容器受窗口高度限制

时间:2018-07-03 14:07:59

标签: html css angular css3 flexbox

我正在尝试制作一个占用整个窗口并使用其自身内部滚动机制的Web应用程序。我不希望任何内容超出浏览器窗口。

现在,我正在尝试使用一种布局,该布局包含一个带有flex容器(设置为flex列)的容器,该容器具有固定的标题导航栏,然后是一个内容区域,该区域将显示动态数据,并具有一个滚动条以查看内容溢出。这样,第二个标题将始终位于页面上。我正在使用Angular来执行此操作,并且由于要路由的组件在标头和内容div之前向DOM添加了另一个级别,因此flex容器不会限制其高度。

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

.header {
  flex: 1 1 50px;
  border: 3px solid red;
}

.container {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  padding: 20px;
}

.dynamic-content {
  flex: 1 1 auto;
  border: 3px solid blue;
  overflow-y: scroll;
  display: flex;
  flex-flow: column;
}

.item {
  font-size: 40px;
}
<div class='page'>

  <div class="header">
    Head
  </div>
  
  <div class="container">
    
    <app-component _nghost class="ng-star-inserted">
      <div class="header">SubHeader</div>
    
      <div class='dynamic-content'>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>      
      </div>
    </app-component>
  
    
    
  </div>

我希望div.container仅占据页面的剩余高度,而div.dynamic-content则不希望调整大小,因为添加了超过其底部边界的项目,而是切断了所有溢出并显示了滚动条以获取其余内容。这样,当用户向下滚动页面时,副标题div和主标题div都将始终显示在屏幕上。

angular-router-endpointangular-routed-component div就像它们的类描述的那样,是一个Angular Router-Outlet和一个由插座插入的自定义Angular Component。据我所知,该组件不能直接设置样式。

3 个答案:

答案 0 :(得分:0)

我不确定我是否理解正确,但是我相信我已经理解了,下面您可以看到解决问题的方法。

关键部分

这里的关键是将height: 100vh添加到.page,这样它就不会随着视点的高度而增长。

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

摘要

body {
  margin: 0;
}

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

.header {
  flex: 1 1 50px;
  border: 3px solid red;
}

.container {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  padding: 20px;
  box-sizing: border-box;
}

.dynamic-content {
  flex: 1 1 auto;
  border: 3px solid blue;
  overflow-y: scroll;
  display: flex;
  flex-flow: column;
}

.item {
  font-size: 40px;
}
<div class='page'>

  <div class="header">
    Head
  </div>

  <div class="container">

    <div class="header">SubHeader</div>

    <div class='dynamic-content'>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
    </div>

  </div>

</div>

答案 1 :(得分:0)

我试图了解预期的结果。

在您的代码中,您选择了flexbox,但忘记了包装器 .angular-routed-component,并且您从这里失去了flex模型的好处。

我已删除并更新了一些值。 (没有max-height,只有height,并且flex减小到一个足以填充剩余空间的值。({flex:1;,已添加还有一些overflow:hidden,以便稍后触发滚动)

.page {
  display: flex;
  flex-flow: column;
  height: 100vh;/* update */
  overflow:hidden;/* update */
}

body {/* update */
  margin: 0;
}

.header {
  min-height: 50px;/* update, no flex rules */
  border: 3px solid red;
}

.container, .angular-routed-component {/* here same rules for the angular child compoment */
  display: flex;
  flex: 1;/* update */
  flex-flow: column;
  padding: 20px;
  overflow:hidden;/* update */
}

.dynamic-content {
  flex: 1;/* update */
  border: 3px solid blue;
  overflow-y: scroll;
  display: flex;
  flex-flow: column;
}

.item {
  font-size: 40px;
}
<div class='page'>

  <div class="header">
    Head
  </div>

  <div class="container">

    <div class="angular-router-endpoint"></div>
    <div class="angular-routed-component">
      <div class="header">SubHeader</div>

      <div class='dynamic-content'>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
      </div>
    </div>



  </div>

答案 2 :(得分:0)

我已经解决了我的问题,发现这不是CSS问题,但是我对角度路由器构造DOM的方式误解了。

插入的组件标签必须设置display: flex。直接向组件标签添加样式的方法是使用CSS选择器::host,在我的情况下,我必须使用:host { display: flex }才能使其正常工作。

我问了最初的问题,认为问题出在我的CSS上,并对其进行了编辑以匹配我的特定问题