Question

我正在尝试将粘性页脚与Google Visualization结合使用，这将占用容器的其余部分。看看这个页面：

http://www.embeddedanalytics.com/responsivedesign2.html

所以在这种情况下，我希望将橙色粘性页脚放在底部，让地图占用剩下的东西。但看起来谷歌可视化占据了整个空间，并推出了＃34;粘性页脚。如果您对 drawchart 调用进行评论，则粘性页脚将显示在底部。

代码（也可在Fiddler上找到）

  <html>
  <head>
    <style>
      * {
        margin: 0;
      }
      html, body {
        height: 100%;
      }
      .page-wrap {
        min-height: 100%;
        /* equal to footer height */
        margin-bottom: -300px;
      }
      .page-wrap:after {
        content: "";
        display: block;
      }
      .site-footer, .page-wrap:after {
        height: 300px;
      }
      .site-footer {
        background: orange;
      }
    </style>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>

      google.load('visualization', '1', {
        'packages': ['geochart'],
        'callback': drawMap
      });

      function drawMap() {
        var data;
        var chart;
        var options;

        data = new google.visualization.DataTable();
        data.addColumn('string', 'Country');
        data.addColumn('number', 'Sessions');
        data.addRow([{v: '150', f: 'Europe'}, 527]);
        data.addRow([{v: '019', f: 'Americas'}, 518]);
        data.addRow([{v: '142', f: 'Asia'}, 336]);
        data.addRow([{v: '009', f: 'Oceania'}, 46]);
        data.addRow([{v: '002', f: 'Africa'}, 30]);
        options = {
        region: 'world',resolution:'continents'};
        chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);

      };
    </script>
  </head>
  <body>
    <div class="page-wrap">
      <div id="chart_div"></div>
    </div>
    <footer id="footer" class="site-footer">
      I'm the Sticky Footer.
    </footer>
  </body>
</html>

Answer 1

尝试为CSS样式添加一些属性（fiddle）：

.page-wrap {
            min-height: 100%;
            /* equal to footer height */
            margin-bottom: -300px;
            position: fixed;
        }
.site-footer {
            background: orange;
            bottom: 0; 
            position: fixed;
            width: 100%;
        }

谷歌可视化粘性页脚

1 个答案: