この写真をメニューバーの下に落とすには？

Question

角材を使用してナビゲーションバーを作成しています。図表は、角度グーグルチャートを使用して作成されます。

ナビゲーションバーとグラフは次のようになります。

Googleのチャートの一部は、ナビゲーションバーで隠されています。

htmlコードです。

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding:0px;margin:0px;position:fixed;"> 
    <h2>Sample navbar</h2> 
</md-toolbar> 

<div ng-controller="GoogleChartCtrl"> 
    <div google-chart chart="presence_detector_Chart" style="height:300px; width:100%;float: left;"></div> 
</div> 

グラフの一部がナビゲーションバーの下に表示され、その部分がバーで隠されないようにしたいと考えています。

htmlコードで何が問題になっていますか？

<div ng-controller="GoogleChartCtrl" style="padding-top: 80px;"> 

これはあなたのGoogleChartCtrlのdiv要素の先頭にいくつかのスペースを追加しますので、同じよう

Answer 1

だけで、あなたのGoogleChartCtrlのdivに次の行を追加します。また、paddingをmarginに変更することもできます。

Answer 2

ナビゲーションバーの位置が修正されました。フローティングにすると、チャートは自動的にバーの下に配置されます。解決策は、固定位置をフロートに置き換えることです。ここにhtmlコードがあります。

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding:0px;margin:0px;float:left;"> 
    <h2>Sample navbar</h2> 
</md-toolbar> 

<div ng-controller="GoogleChartCtrl"> 
    <div google-chart chart="presence_detector_Chart" style="height:300px; width:100%;float: left;"></div> 
</div>