代码之家 › 专栏 › 技术社区 › Enoy

如何使web内容的宽度和高度与窗口的宽度和高度相适应

css html

-2

Enoy · 技术社区 · 6 年前

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

封面图片有自己的css类封面图片:

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

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

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

.nrrdCanvas {
    margin: 25px 25px;
}

我也读过:

1 回复 | 直到 6 年前

StefanBob 6 年前

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

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

.other-element {
   width: 20%;
}

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前