调整屏幕大小时防止固定 div 与液体 div 重叠

发布于 2024-10-06 17:07:35 字数 882 浏览 2 评论 0原文

我查看了我能找到的所有 div 讨论,但没有完全看到我的答案。我希望我没有转发。

我有一个液体布局,除了左侧的一个 div 位于固定位置。我需要保持固定状态,因为当我滚动时我希望它保持不变。其他 div 分布在它旁边。一切看起来都很棒,直到屏幕达到一定宽度(大约 1700 像素),然后固定 div 开始覆盖右侧的 div。

我已经在主体上使用了最小宽度来修复它,但是有效的最小宽度太大,无法保证在较小的屏幕上或当有人调整窗口/缩放大小时防止水平滚动。

我怎样才能保持它的流动性,并且无论屏幕尺寸如何,它仍然看起来不错?

CSS如下:

body {
min-width:1000px; /*~1700 to fix problem*/
padding-left:5px;
padding-right:5px;
padding-top:0;
padding-bottom:0;
margin:0;
}

.container {
padding: 0;
margin-left:auto;
margin-right:auto;
height:100%;
}

.leftinfo {
float:left;
position:fixed;
left:.5%;
top:150px;
background-color:#FFF;
height:400px;
width:160px;;
padding:10px;
}

.rightinfo {
background-color:#33F;
float:right;
height:200px;
border:thin;
width:15%;
margin-top: 25px;
}

.contentbackground {
float:left;
width:74%;
margin-left:10.5%;
margin-top: 30px;
}

非常感谢您的帮助!

I have looked at every div discussion I could find and did not quite see my answer. I hope I am not reposting.

I have a liquid layout except one div on the left that I have in a fixed position. I need to keep if fixed because when I scroll I want it to stay. The other divs are spread out next to it. Everything looks great until the screen reaches a certain width (right around 1700px) and then the fixed div starts to cover the div immediately to the right.

I have used min-width on the body to fix it, but the min-width that works is too large to guarantee preventing a horizontal scroll on smaller screens, or when someone resizes the window/zooms.

How can I keep it liquid and still make it look good no matter what the screen size?

CSS below:

body {
min-width:1000px; /*~1700 to fix problem*/
padding-left:5px;
padding-right:5px;
padding-top:0;
padding-bottom:0;
margin:0;
}

.container {
padding: 0;
margin-left:auto;
margin-right:auto;
height:100%;
}

.leftinfo {
float:left;
position:fixed;
left:.5%;
top:150px;
background-color:#FFF;
height:400px;
width:160px;;
padding:10px;
}

.rightinfo {
background-color:#33F;
float:right;
height:200px;
border:thin;
width:15%;
margin-top: 25px;
}

.contentbackground {
float:left;
width:74%;
margin-left:10.5%;
margin-top: 30px;
}

Thank you much for the help!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

空气里的味道 2024-10-13 17:07:35

您是否考虑过使用%宽度值而不是px?这可以允许在不同的窗口大小下相对调整大小。

Have you considered using % width values instead of px? This could allow for relative resizing under different window sizes.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文