粘滞页脚与谷歌可视化

我想与谷歌可视化，将占用容器的其余部分一起粘脚。看看这个页面：粘滞页脚与谷歌可视化

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

所以在这种情况下，我想有橙色粘页脚位于底部，并有地图占用任何保留。但是，Google Visualization似乎占据了整个空间并“推出”了粘滞的页脚。如果您评论绘图调用，则粘性页脚会显示在底部。

代码（也可在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>

来源

2014-10-03 M Schenkel

尝试一些属性添加到您的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%; 
     }

来源

2015-04-01 12:50:34 BananaJoe

粘滞页脚与谷歌可视化

回答

相关问题