我正在尝试弄清楚如何使用 CSS 解决以下问题:
我有一个容器，假设它是一个 div。它应该始终在我的页面上可见，垂直和水平居中。 容器不应该有一个固定的大小，而是一个固定的比例(或纵横比)，比如:“宽度 = 高度的 1/3”。 此外，容器应尽可能大，始终可见。 (意思是“触摸”浏览器窗口的上下或左右边框，具体取决于当前窗口大小)
到目前为止我是这样进行的:
相关html:
<body>
<div>Text</div>
</body>
CSS:
body {
margin: 0px;
}
div {
position: absolute;
background-color: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这当然只是让 div 居中。最重要的部分是尺寸，我在上面描述过。这可以用 css 实现吗？
最佳答案
您可以设置 min-height: 100vh 使元素始终为全高和 width: calc(100vh/3); 使宽度为 1/3 窗口高度
body {
margin: 0px;
}
div {
position: absolute;
background-color: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100vh;
width: calc(100vh/3);
}<div>Text</div>关于html - CSS:在窗口上放置一个定义比例尽可能大的容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34422175/