如何让这张照片落在菜单栏下面？

Question

我正在使用角度材料来创建导航栏。使用 angular-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代码有什么问题？

Answer 1

只需将以下一行添加到GoogleChartCtrl div中，如下所示：

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

这会在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>