粘滯頁腳與谷歌可視化

我想與谷歌可視化，將佔用容器的其餘部分一起粘腳。看看這個頁面：粘滯頁腳與谷歌可視化

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

粘滯頁腳與谷歌可視化

回答

相關問題