html - 将所有内容放入使用 bootstrap 设计的 HTML 页面中的可视区域，无需滚动

Question

我正在设置一个简单的 php 页面来以图形方式显示数据。在这个元素中使用了 bootstrap 4、php、mysql 和 chart JS，并且能够构建一个包含我需要的所有信息的漂亮页面。现在我面临着将所有这些数据(12 张图表，12 张卡片)放入可视区域的挑战，以便在加载时自动适合屏幕(不切断)并且无需滚动页面。我可以通过在浏览器中缩小页面来做到这一点，但想知道任何好的替代 CSS/js 方法来做到这一点，因为缩小会使字体看起来很糟糕。我尝试将 body 元素设置为 100vh 并 overflow hidden ，但这是 Not Acceptable ，因为它正在切割数据并简单地隐藏滚动条。

下面是示例 fiddle

jQuery('body').css('height', '100vh').css('overflow-y', 'hidden');

JS fiddle https://jsfiddle.net/ogmvn07e/1/

Answer 1

如果将整个页面内容放入包装器 div 或页眉中，则可以将该元素的高度设置为 100vh，并将溢出设置为隐藏。我刚刚用你的 JS fiddle 试了一下，它开始工作了。然后您可能需要添加媒体查询以在平板电脑和移动设备上正确显示它。

<header>
  <!-- content goes inside --> 
</header>

header {
  height: 100vh;
  overflow: hidden;
}