没有滚动的HTML单页面

Question

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

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

谢谢你的答案!还要回答如果我想要3列相等宽度和固定高度与相同的无滚动选项

提前致谢

Answer 1

你可以使用相对于视口大小的"新"css单位vh和vw,它现在已经得到了很大的支持.例:

.row {
  height:33.3vh;
}

看到我为了看到它而制作的这支笔.

Answer 2

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

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

jsFIDLE

来自 w3school：

CSS 单位

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

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