调整屏幕大小时防止固定 div 与液体 div 重叠
我查看了我能找到的所有 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您是否考虑过使用%宽度值而不是px?这可以允许在不同的窗口大小下相对调整大小。
Have you considered using % width values instead of px? This could allow for relative resizing under different window sizes.