如何让这张图片落在菜单栏下方？

Question

我正在使用 angular material 创建导航栏。使用 angular-google chart.

创建图表

导航栏和图表如下所示；

部分 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 顶部添加一些 space。或者，您可以将 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>

如何让这张图片落在菜单栏下方？

How to make this picture fall below the menu bar?

html

css

angularjs

angular-material