没有滚动的HTML单页面

Question

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

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

感谢答案的家伙们！如果我想要3列宽度相等且固定高度相同的无滚动选项，也可以回答

提前致谢

Answer 1

您可以使用＆＃34; new＆＃34; css单位 vh 和 vw ，它们相对于视口的大小而言，现在非常支持它。例如：

.row {
  height:33.3vh;
}

请参阅this pen我做过的观看动态。

Answer 2

您需要的是VH（视口高度）。你可以看到它有效：

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

jsFIDDLE

来自w3school：

CSS单位

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

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

Answer 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>

Answer 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;
}