gpt4 book ai didi

html - 你能用 'absolute' 定位 2 个容器并且仍然让它成为响应式设计吗?

转载 作者:行者123 更新时间:2023-11-28 01:52:43 25 4
gpt4 key购买 nike

我试图让一个网站有两个容器,它们根据视口(viewport)大小保持相同的大小。一个是导航栏,一个是内容所在的位置。我正在使用“绝对”定位,这样我就可以将容器保持在特定大小,而不管其中内容的大小。基本上我希望网站永远不会滚动,而只是两个容器。 (主要针对桌面 View ,一旦它缩小到移动尺寸,我将更改网站外观)

这是我目前正在尝试的:

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%;
}
<div class="nav-container">
<h2>Navbar</h2>
</div>

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

这是我想要它成为的基本概念,但它很粗糙,并且在离开屏幕并创建滚动条时无法真正响应响应。有没有更好的方法可以处理这个问题?我可以在使用“绝对”的同时以某种方式使容器成为“ block ”格式,以便它们彼此堆叠并且我可以用边距分开吗?

感谢您的帮助!

最佳答案

这是否接近您要寻找的内容? 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; 将确保在计算容器大小时包括填充和边框。

祝你好运!

关于html - 你能用 'absolute' 定位 2 个容器并且仍然让它成为响应式设计吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49833753/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com