如何使水平滚动网页的固定高度与设备不同？答案

【问题标题】：How to have fixed height for a horizontal scrolling webpage differently to devices?如何使水平滚动网页的固定高度与设备不同？
【发布时间】：2018-12-10 01:58:43
【问题描述】：

我正在尝试制作一个水平滚动的网站，我面临的困难是将我的页面高度固定到设备的高度。此外，如果我在 css 中修复了高度的值，那么它会针对特定的屏幕尺寸进行硬编码，所以每当我在不同尺寸的显示器上打开页面时，硬编码的值就会产生麻烦。到目前为止，我使用了一个非常基本的 css，这里是：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style media="screen">
  #body {
    width: 4000px;
    height: auto;
    max-height:100vh;
  }
</style>
<title></title>
</head>
<body id=body>
--\\CONTENT GOES HERE \\--
</body>
</html>

【问题讨论】：

max-height: 100vh 确实应该限制您的 #body 永远不要超过那个高度。您显然需要确保没有任何内容超出此范围。您不妨添加overflow-y: hidden。除此之外，您遇到的问题是核心问题 - 这将有助于明确您当前方法遇到的问题。
Make body have 100% of the browser height的可能重复
或Horizontal scrolling page, mobile browsers adding vertical height的可能副本。

标签： html css

【解决方案1】：

这应该会给你你正在寻找的东西。您也可以添加 overflow-yproperty 以确保禁用 y 滚动。只需确保您的其余内容是响应式的，以便它可以根据视图高度调整大小。

   #body { 
        width: 4000px;
        height: auto;
        max-height: 100vh;
        overflow-y: hidden;
    }

【讨论】：