は、固定ヘッダとレイアウトの作成、固定サイドバー、角材質/フレックスレイアウトを使用して固定されたコンテンツのセクション角度

Question

に私はWebアプリケーションのレイアウトを作成しようとしていAngular MaterialとFlex Layout

/W Angularを使用していそれはちょうどthis siteのようです。固定ヘッダー、固定サイドバー、固定コンテンツの痛みに注目してください。ブラウザのスクロールは使用されず、スクロールするだけでブラウザのビューポートに完全に収まります。ここで

は、私は私に私の基本的な構造を与えるために使用していますhtmlです：

<md-toolbar color="primary"> 
    <span>Application Title</span> 
</md-toolbar> 
    <md-sidenav-container> 
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav> 
    <div class="my-content">Main content</div> 
    </md-sidenav-container> 

また、私は次のスタイル設定：

html, body { 
     margin: 0; 
     width: 100%; 
     height: 100%; 
     overflow: hidden; 
    } 
md-sidenav-container, .main-content { 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 

を私はページ上のツールバーせずにいることに気づきましたすべてが完璧に機能します。だから私は余裕を持って足を付け加えました：64px; md-sidenav-containerの.main-contentクラスに追加します。それはコンテンツのためにそれを修正したようだが、sidenavはそうではない。 sidenavのスクロールバーはまだブラウザのウィンドウの下にあります。

誰かがフレックス・ディレクティブを使ってそれを行う方法を教えてもらえるように、私はAngularアプリケーションにフレックス・レイアウトをインストールしています。そうでなければ、普通のCSSもうまくいくはずです。

Answer 1

あなたはそれはあなたが要求してきたように、完全に同じではありませんhttps://angular-material2-issue-dgcx3j.stackblitz.io/

で作業例を確認することができます（それは特別な機能を持っています）。サイドバーは大きな画面に固定され、小さな画面では非表示になり、ツールバーにはメニューボタンが表示されます。あなたはhttps://stackblitz.com/edit/angular-material2-issue-dgcx3j?file=app%2Fapp.component.ts

でコードを確認することができます

また、あなたがhttps://github.com/angular/material.angular.io

Answer 2

での角度素材ドキュメントサイト（あなたは同じ機能を求めてきました1）のソースコードを見つけることができますこれは、あなたが探しているものです

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
mat-sidenav-container { 
 
    width: 100%; 
 
    height: calc(100% - 64px); 
 
}

<md-toolbar color="primary"> 
 
    <span>Application Title</span> 
 
</md-toolbar> 
 
<md-sidenav-container> 
 
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav> 
 
    <div class="my-content"> 
 
    <router-outlet></router-outlet> 
 
    </div> 
 
</md-sidenav-container>

Answer 3

のためにあなたは、このコードを試すことが

HTML

<md-toolbar color="primary"> 
    <span>Application Title</span> 
</md-toolbar> 

<md-sidenav-container class="example-container"> 
    <md-sidenav #sidenav class="example-sidenav" opened="true"> 
    Jolly good! 
    </md-sidenav> 

    <div class="example-sidenav-content"> 
    <div class="my-content">Main content</div> 
    </div> 

</md-sidenav-container> 

CSS

.example-container { 
    width: 500px; 
    height: 300px; 
    border: 1px solid rgba(0, 0, 0, 0.5); 
} 

.example-sidenav-content { 
    display: flex; 
    height: 100%; 
    align-items: center; 
    justify-content: center; 
} 

.example-sidenav { 
    padding: 20px; 
} 

.my-content{ 
    height:1200px; 
} 

とHERESにPlunkerリンク：私はそれの内側に相対して配置されているのdivに絶対配置sidenavを使用することをお勧めしhttps://plnkr.co/edit/YFGQdVcNnIhMK0GzZ25Z?p=preview