将所有内容放入使用引导程序设计的HTML页面内的可见区域，而无需滚动

Question

我正在设置一个简单的php页面以图形方式显示数据。为此项目使用了bootstrap 4，php，mysql和chart JS，并能够使用我需要的所有信息构建漂亮的页面。现在，我面临着将所有这些数据（12张图形，12张卡中的数据）适合可见区域的挑战，因此在加载时，它会自动适合屏幕（无需切断），而无需滚动页面。我可以通过在浏览器中缩小页面来完成此操作，但是想知道使用CSS / js的另一种好方法，因为缩小会使字体看起来很糟糕。我尝试将body元素设置为100vh并隐藏了溢出，但这是不可接受的，因为它会剪切数据并只是隐藏滚动条。

下面是小提琴

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

JS小提琴 https://jsfiddle.net/ogmvn07e/1/

Answer 1

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

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

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