无滚动的 HTML 单页答案

【问题标题】：HTML single page with No scroll无滚动的 HTML 单页
【发布时间】：2017-02-03 17:39:29
【问题描述】：

我想创建一个网页。我需要的是网页应该是基于用户窗口大小的固定大小，就像我们不需要向下滚动来查看某些东西一样。我可以将其更改为特定高度，但问题是在调整浏览器窗口大小时，它再次包含滚动选项，因为图像大小

在上图中，第一张图片尺寸过大，因此它显示的是空白空间而不是响应式在第二个中，用户窗口的尺寸减小了，因此他们显示了一个滚动视图，问题是我希望它变得灵活。为了改变窗口大小，改变 div 的高度而不是显示滚动选项。任何人都可以帮助我吗？

感谢大家的回答！如果我想要 3 列等宽和固定高度且具有相同无滚动选项的列，请回答

提前致谢

【问题讨论】：

你能创建jsfiddle链接吗？
"我可以把它改成一个特定的高度"在窗口调整大小时做同样的事情，使用 window.resize 事件
您能否提供一个尝试实现此目的的代码 css/html 示例？
你的代码在哪里？请仔细阅读提供minimal reproducible example。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您可以使用与视口大小相关的“新”css 单位 vh 和 vw，并且目前已得到很好的支持。示例：

.row {
  height:33.3vh;
}

请参阅我制作的this pen 以查看它的实际效果。

【讨论】：

【解决方案2】：

您需要的是 VH（视口高度）。有一个小提琴，你可以看到它在工作：

.yourdivs{
    height:33vh;
    background-color:red;
    border-bottom:1px solid black;
}

jsFIDDLE

来自 w3school：

CSS 单元

vh：相对于视口高度的 1%。

视口：浏览器窗口大小。如果视口宽 50 厘米，则 1vw = 0.5 厘米。

【讨论】：

【解决方案3】：

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    $('#divImage').css('min-height', windowHeight);
  };
  console.log($('#divImage').height());
  setHeight();
});

body {
  margin: 0;
  overflow: hidden;
}
#divImage {
  height: auto;
}
img {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divImage">
  <img src="http://placehold.it/1600x900">
</div>

【讨论】：

【解决方案4】：

Look at "meta" and css-style of body

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

和 CSS：

body{
  padding: 0;
  overflow: hidden;
}
body>div{
  max-height: 33.3vh;
  overflow-x: auto;
}

【讨论】：