Question

我已将我的div ui-content集中在我的页面中间，分辨率为1920x1080，但当我以1366x768的分辨率检查时，div没有调整自己的低度。在1920x1080分辨率下，当我调整高度时，我有完全相同的问题。我希望它可以调整到更小的尺寸，就像背景图像一样。

我尝试使用atrribute max-height，但这只是添加一个滚动条而不执行任何操作。我也试过Oliviers suggestion，但这似乎也没有做过。我创建了一个带有完整代码here的JSFiddle，并在下面添加了相关的css代码。

element.style {
    margin-bottom: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ui-content {
    padding-top: .5em;
    max-width: 768px;
    margin: 0 auto;
    background-color: rgba(19, 23, 23, 0.38);
    border-radius: 26px;
}

Answer 1

问题是ui-content元素的父div没有指定的高度。我做了另一个小提琴演示：

https://jsfiddle.net/v8exwacj/

请注意，％height元素仅在其父级具有指定高度时获得高度，即height: 200px;

您可以通过为父元素指定特定高度或使用javascript动态调整高度来解决此问题。这里将更详细地解释这个问题：Percentage Height HTML 5/CSS

该答案提到以下作为现代浏览器的解决方案：

div {
    height:100vh; 
}

这将使div成为视口高度的100％。

Div没有正确调整大小以适应不同的屏幕尺寸

1 个答案: