Question

我正在尝试使网站有两个容器，根据视口大小保持相同的大小。一个是导航栏，一个是内容的去向。我正在使用绝对的＆＃39;定位使我可以保持容器的特定尺寸，无论其内部的内容大小。基本上我希望网站永远不会滚动，只是2个容器。（主要用于桌面视图，我会在网站变为移动尺寸后更改网站）

这是我到目前为止所尝试的内容：

＆＃13;

body {
  background-color: gray;
}

.nav-container {
        background-color: rgba(0, 0, 0, 0.6);
        text-align: center;
        color: white;
        box-shadow: 5px 5px 10px rgb(0, 0, 0, 0.3);
        padding: 20px;
        
        position: absolute;
        height: 80%; 
        width: 20%; 
        top: 10%; 
        left: 10%;
    }
    
.content-container {
        background-color: rgba(255, 255, 255, 0.6);
        box-shadow: 2px 2px 10px rgb(0, 0, 0, 0.3);
        padding: 20px;
        
        position: absolute;
        height: 80%; 
        width: 50%; 
        top: 10%;
        left: 38%;
    }

＆＃13;

<div class="nav-container">
  <h2>Navbar</h2>
</div>

<div class="content-container">
  <h2>Content</h2>
</div>

＆＃13;

它是我想要它的基本概念，但它很粗糙，并且当它离开屏幕并创建滚动条时，它不能真正起作用。有没有更好的方法来处理这个问题？我可以以某种方式使容器成为一个“阻塞”的容器。使用＆＃39;绝对＆＃39;格式化所以他们堆叠在一起，我可以用保证金分开？

感谢您的帮助！

Answer 1

这接近你想要的吗？ https://codepen.io/panchroma/pen/XELRLr

我添加了以下CSS：

.nav-container,
.content-container{
  overflow-y:scroll;
  box-sizing: border-box;
}

当导航或主要内容溢出其容器时，overflow-y:scroll;属性将添加滚动条，box-sizing:border-box;将确保在计算容器大小时包含填充和边框。

祝你好运！

你能用2个容器定位绝对的＆＃39;并仍然使其响应式设计？

1 个答案: