时间戳

首页 > 解决方案 > Google 可视化和 CSS 网格高度

css - Google 可视化和 CSS 网格高度

问题描述

我想要一个使用高度和宽度作为百分比的 CSS 网格，以使其适合任何尺寸的浏览器。问题是我的两个单元格包含谷歌可视化。

如果您为它们提供选项，Google 可视化可以采用其容器的高度和宽度

var options = {width: '100%', height: '100%'}
var chart = new google.visualization.Table(document.getElementById('source_table_div'));
chart.draw(data, options)

问题是，如果我在没有最小尺寸的情况下这样做，那么可视化根本不会绘制，同样的事情也会发生

min-height: 100%;

也是。但是，如果我使用像素对最小高度进行硬编码，我可以看到一些东西：

min-height: 500px;

但它永远不会调整到单元格的最大大小，只有最小 - 这意味着我无法更改高度以适应页面。

我知道我可以进行@media 查询，但我必须制作数千个以适应各种意外情况。

如果没有 1000 个@media 查询，我怎么能做到这一点？

为 WhiteHat 添加我的样式表和页面。

风格：

<style>

#full_page_grid_container {
  width: 95%;
  height: 95%;
  display: grid;
  grid-template-columns: 45% 10% 45%;
  grid-template-rows:    10% 10% 40% 40%;
  grid-template-areas:   "header        header       header" 
                         "source_search .            target_search" 
                         "source_table  right_button target_table" 
                         "source_table  left_button  target_table";
}

#full_page_grid_container div {
  border-style: solid;
}

h1 {
  color: green;
  text-align: center;
}

#source_table_div {
  grid-area: source_table;
  min-height: 700px;
  max-height: 100%;
}

#target_table_div {
  grid-area: target_table;
}

.title {
  grid-area: header;
}

.link_home {
  grid-area: header;
}


</style>

和页面：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('AddCrewStylesheet'); ?>
    <?var url = getScriptUrl();?>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);
      function drawTable() {
        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=Crew_Basics');
        query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
         var data = response.getDataTable();
        var options = {width: '100%', height: '100%'}

        var chart = new google.visualization.Table(document.getElementById('source_table_div'));
        chart.draw(data, options)
      }
    </script>

  </head>
  <body>
    <div id="full_page_grid_container">
      <div class="title"><h1>Select Your Crew</h1></div>
      <div class="link_home"><a href="<?=url?>">Return Home</a><br /></div>
      <div id="source_table_div" class="google_table"></div>
      <div id="target_table_div" class="google_table"></div>
    </div>
  </body>
</html>

标签： cssgoogle-visualizationcss-grid

解决方案

推荐阅读