2
私はAngular Materialを使ってAngularJS（v1.5）アプリケーションを開発していますが、私はレイアウトの実装についていません。これは、基本的に固定高さのヘッダーで、可変長の内容に続いて固定高さのフッターが続きます。ヘッダーとフッターの間のスペースを埋めるための十分なコンテンツがない場合は、完全なページをスクロールし（ヘッダーを含む）、フッターをウィンドウの下部にプッシュする必要があります。角材のflexbox divの崩壊を防ぎます
私はこれまでに得たコードを使ってペンを作成しました（divのコンポーネントを置き換え、すべての中間divをAngularで挿入しました）。しかし、ウィンドウの高さを低くすると、コンテンツはコンテンツの高さを維持してスクロールバーを表示する代わりに、高さをゼロにします。
問題はおそらく.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
これを投稿して解決策を見つけました。「コンテナメイン」divからフレックスを削除し、別のdivのコンテンツをラップします。私はこの変更を含むようにペンを更新しました。 –
別の編集：私のテストシステムでは動作しますが、ペンでは動作しないので、 'flex：1 0 0％'と 'height：calc（100vh - 200px）'を含むように。さらなる調査を行う必要があります。 –