Question

我已经在一个网站上工作了一段时间。在主页上，我在左侧有一个显示供词的框，而在该框的右边有另一个显示最喜欢的供词的框。现在，左边的框适合每个屏幕分辨率的屏幕，但右边的框在屏幕分辨率较低时首先进入。我将发布描述我的问题的图片。我如何才能使两个盒子都适合，而当屏幕分辨率较低时，我不希望它们变得一团糟。我的屏幕是1920x1080，如果屏幕是1900，那么该框就不合适了，因此只能在1900宽度以上工作。

我的左框CSS：

.confessbox { 
    background-color: rgba(50, 50, 50, .3);
    margin-top: 10px;
    width: 597px;
    float:right;

}

.confession {
    background-color: rgba(50, 50, 50, .4);
    font-size: 22px;
    font-weight: 300;
    padding: 3px 0;
    width: 578px;
    margin-left: 10px;
    margin-bottom: 10px;

}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

我的右框CSS：

.sidebox {
    float: right;
        left: -24%;
        margin-top: 3.4%;
        width: 300px;
    height: 150px;
    top:20px;
    position: relative;
        transform: translate(-50%, -50%);
}

这些框中的HTML非常大，所以我只解释一下，左侧框中的内容如下：

<div class=container">
<div class="confessBox">
<div class="confession">

<!-- HERE GOES ALL ITS CONTENT -->

</div>
</div>

右框中的内容如下：

<div class="sidebox">

<!-- HERE GOES ALL ITS CONTENT -->

</div>

On 1920x1080

On 1024x600, and its only visible good on 1900 width and above

因此，我希望他们在同一行中既不显示屏幕，又显示什么屏幕分辨率，这可能吗？我已经测试了其他一些站点，即使在低分辨率下，一切也看起来不错。

Answer 1

.leftsectionClassName,.rightsectionClassName{min-height:100vh}

100vh 将占据全屏视口的最高位置。分辨率监视器使用的是什么高度，将达到所需的高度。

希望它将为您充分使用。如果您有任何疑问，请告诉我。

Answer 2

一种解决此问题的方法，您可以尝试使用CSS 媒体查询 您可以根据屏幕的宽度添加特定的CSS规则。

此规则说，对于最大宽度为1900px的窗口，请应用以下样式：

@media (max-width:1900px) { 
.sidebox {
 left: auto; /*restore to default*/
 right: -24%; /*push it to the right more*/
}
 }

如果您想在那里进行测试，这是我所做的jsfiddle。

w3schools上有一个有关媒体查询的页面，如果您想阅读here

一个盒子不适合不同的屏幕分辨率

2 个答案: