防止角材中的flexbox div崩溃

我正在开发使用Angular材质的AngularJS（v1.5）应用程序，并且我被卡住了布局的实现。这基本上是一个固定高度的页眉，其次是高度可变的内容，后面跟着一个固定高度的页脚。当没有足够的内容填充页眉和页脚之间的空间时，整个页面应该滚动（包括页眉），并且页脚应该被推到窗口的底部。防止角材中的flexbox div崩溃

我已经创建了一个笔，包含我到目前为止的代码（用div替换了组件，并且引入了由Angular插入的所有中间div），但是当我减小窗口的高度时，内容被折叠为高度为零而不是保持内容的高度并显示滚动条。

问题可能与.main CSS类有关，但我无法弄清楚我应该放在那里。

的HTML：

<body ng-app="app"> 
    <!-- ui-view div --> 
    <div layout="column" layout-fill> 
    <!-- component div --> 
    <div layout-fill> 
     <!-- my own div around the page content --> 
     <div layout="column" layout-fill> 
     <!-- header component div --> 
     <div flex="none"> 
      <header flex="none"> 
      <md-toolbar> 
       <div class="container"> 
       <div class="md-toolbar-tools" layout="row" layout-align="center center"> 
        <div flex></div> 
        <h1>HEADER</h1> 
        <div flex></div> 
       </div> 
       </div> 
      </md-toolbar> 
      </header> 
     </div> 
     <!-- content div --> 
     <div flex class="container main"> 
      <h2>CONTENT</h2> 
     </div> 
     <!-- footer component div --> 
     <div flex="none"> 
      <footer flex="none"> 
      <md-toolbar> 
       <div class="container"> 
       <div class="md-toolbar-tools" layout="row" layout-align="center center"> 
        <div flex></div> 
        <h1>FOOTER</h1> 
        <div flex></div> 
       </div> 
       </div> 
      </md-toolbar> 
      </footer> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

的CSS：

header, footer { 
    md-toolbar { 
    height: 100px; 
    min-height: 100px; 
    background-color: #C8C8C8; 

    .md-toolbar-tools { 
     height: 100px; 
     min-height: 100px; 
    } 
    } 
} 

.container { 
    width: 600px; 
    margin: 0 auto; 
} 

.main { 
    background-color: #E8E8E8; 
}

和JavaScript：

angular.module("app", ['ngMaterial']);

笔：http://codepen.io/kdbruin/pen/ZLwmvW

来源

2017-02-17 Kees de Bruin

好吧，刚刚发布了这个，发现了一个解决方案：从“容器主”div中移除flex并将内容封装在另一个div中。我已更新笔以包含此更改。 –

另一个编辑：将.main CSS样式改为包含'flex：1 0 0％'和'height：calc（100vh - 200px）'，因为这适用于我的测试系统，但不适用于笔。需要做进一步的调查。 –

您可以使用柔性=“成长“与min-height在容器上达到预期的效果。

这里是代码

<div layout="column" flex="grow" style='background-color:green'> 
<md-toolbar> 
    <div flex="10"> 
    <div class="md-toolbar-tools" layout="row" layout-align="center center"> 
     <div flex></div> 
     <h1>HEADER</h1> 
     <div flex></div> 
    </div> 
    </div> 
</md-toolbar> 
<div flex="grow" style='background-color:pink; min-height:1000px'> 
    <div ng-repeat="no in [0,1,2,3,4,5,6,7,8,9]"> 
    <h2>CONTENT - {{no}}</h2> 
    </div> 
</div> 
<div flex="10" style='background-color:blue'> 
    <div flex></div> 
    <h1>FOOTER</h1> 
    <div flex></div> 
</div>

这里是工作Codepen。

来源

2017-02-17 14:23:06 nextt1

这个工程就像一个魅力，消除了围绕内容的额外div的需求。但是，'min-height'需要设置为'calc（100vh - 200px）'来考虑页眉和页脚的高度。 –

您可以根据需要使用'min-height'值。 :) – nextt1

防止角材中的flexbox div崩溃

回答

相关问题