如何使网页内容的宽度和高度适应窗口的宽度和高度

Question

我想设置网页内容的宽度和高度以适应窗口的宽度和高度。

目前封面页和场景页中都有垂直滚动条。

封面图片有自己的css类coverImage：

.coverImage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

此外，内部场景页面具有相同的行为，它显示了一个垂直滚动条：

左边的图像，缩略图有自己的css类叫做微型，画布有一个类nrrdCanvas：

.miniature {
    width: 100px;
    height: 100px;
    margin: 10px;
}

.nrrdCanvas {
    margin: 25px 25px;
}

我也读过：

https://developers.google.com/web/fundamentals/design-and-ux/responsive/

Set size of HTML page and browser window

感谢您的帮助。

Answer 1

没有代码，我可以给你一般建议。如果您希望页面上的元素跨越窗口的整个高度和宽度，则一种方法是使用视口单位设置其宽度和高度。

.element {
   width: 100vw;
   height 100vh;
}

但是对于所有其他响应项，只需使用百分比作为宽度。例如：

.other-element {
   width: 20%;
}

另一个非常有用的工具，通常用于部分的响应和布局是flexbox。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/