0
タブレット/モバイルビューのときに折りたたまれて非表示になるコンテンツが右に表示されているロックされた左サイドバーがあると思っています。私はそれがAngular Materialのdocウェブサイト、またはこれと似た何かと同じ機能を見たり/持ったりしたいと思っています。codepen。今のところ私のコンテンツは開いているときに自分のサイドの右側に表示されませんが、画面の残りの部分を取り上げていくらかの余裕があります。もし私が画面を小さくして、シデナブが崩壊すると、コンテンツは表示されますが、スクロールできません。角度素材がロックされていますmd-sidenavが画面全体を占めます
これは私のindex.htmlのための構造は次のようになります。すべてのヘルプ/洞察力をいただければ幸いです
<body class="docs-body" ng-cloak ng-app="TrooNews" ng-controller="AppController as app">
<md-sidenav
class="site-sidenav md-sidenav-left md-whiteframe-z2"
md-component-id="left" hide-print
md-is-locked-open="$mdMedia('gt-sm')">
<header class="nav-header">
<a ng-href="/" class="docs-logo">
<img src="resources/logo.svg" alt="" />
<h1 class="docs-logotype md-heading">Troo News</h1>
</a>
</header>
<md-content flex role="navigation">
<md-list>
<md-list-item ng-repeat="item in app.menu" ng-click="app.navigateTo(item.link)">
<md-icon>{{item.icon}}</md-icon>
<p>{{item.title}}</p>
</md-list-item>
</md-list>
</md-content>
</md-sidenav>
<div layout="column" tabIndex="-1" role="main" flex>
<md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar">
<div class="md-toolbar-tools docs-toolbar-tools" tabIndex="-1">
<md-button class="md-icon-button" ng-click="app.toggleSidenav('left')" hide-gt-sm aria-label="Toggle Menu">
<md-icon>menu</md-icon>
</md-button>
<div layout="row" flex class="fill-height">
<h2 class="md-toolbar-item md-breadcrumb md-headline">
<span class="md-breadcrumb-page">Test</span>
</h2>
<span flex></span> <!-- use up the empty space -->
<div class="md-toolbar-item" layout="row">
<div class="search">
<md-icon class="search_icon">search</md-icon>
<input ng-model="searchCard">
</div>
</div>
</div>
</div>
</md-toolbar>
<md-content md-scroll-y layout="column" flex>
<div ng-viewport flex="noshrink"></div>
<div layout="row" flex="noshrink">
<div id="license-footer">
Powered by Troo News.
</div>
</div>
</md-content>
</div>
</body>
。
bodyタグにlayout = "row"を追加してみてください。 – sdfacre
@sdfacre私はそれを見ていないと信じられないほどありがとうございました<3 –