Css 定位div'；与媒体的疑问

我在构建我的投资组合网站的联系人页面时遇到问题。理想情况下，我希望页面的大小与用户屏幕的大小相同，因此没有滚动

• 当屏幕为1080p时，我希望页面像图#1（找到下面的图像链接）
• 当屏幕高度改变时，黑色、红色和蓝色容器应作为一个整体一起移动，如图2所示。它们是独立的分区，具有不同的尺寸。然后，当红色和蓝色容器的顶部靠近导航栏（绿色容器）时，我想让它们从导航栏停止50px，然后重新显示滚动条，以便红色、蓝色和黑色容器不会干扰导航栏。。。。。我说得通吗？：）
• 当最大宽度如图3所示发生变化时，情况也是如此
• 问题是，当宽度达到某个像素时，比如说当右边的边距为50像素时，蓝色容器应将其自身重新定位到红色容器下方，并且再次显示滚动条（如果需要）

我已经尝试了很多方法使它起作用，但还没有成功。此消息评论部分的屏幕截图如所示

我希望我已经详细解释了这个问题，有人能帮我解决。提前谢谢

小提琴：

CSS:

body {
    margin-left: 50px;
}

#navbar {
    height: 100px;
    width: 100%;
    background-color: green;
    opacity: 0.5;
    margin-left: -50px;
}

#container_1 {
    width: 75px;
    height: 100px;
    background-color: red;
    display: inline-block;
    position: relative;
    top: 355px;
}

#container_2 {
    width: 75px;
    height: 150px;
    background-color: blue;
    display: inline-block;
    position: relative;
    top: 355px;
}

.skyline {
    position: fixed;
    bottom: 0;
    z-index: -1;
    left: 0;
}

@media only screen and (max-height: 600px){
    #container_1 {
        top: 50px;
    }

    #container_2 {
        top: 50px;
    }
}  

---

屏幕截图-类似这样的东西？开始有点不错，但是当屏幕高度达到200像素左右时，红色、蓝色和黑色的容器仍然会穿过绿色的容器。这？非常感谢您仔细考虑@nenavracar，这更接近解决方案。然而，容器的大小不应该随着高度的变化而减小，因为容器中的内容物会被挤压。此外，天际线仍将穿透导航栏。