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

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 将占据全屏视口(viewport)高度。无论显示器使用的分辨率是什么，都将占用适当的高度。

希望它能为您所用。如果您有任何疑问，请告诉我。