如何设置宽度以打开浏览器滚动条并停止折叠页面上的元素
我正在页面顶部创建一个横幅。它是使用 3 个包含内容的横幅构建的。当我水平缩小浏览器窗口时，我的绿色横幅组件（右侧）随着屏幕边缘移动，最终重叠或进入我的蓝色横幅组件（左侧）下方。
如何设置浏览器（主体？）宽度，使右侧横幅停止随浏览器缩小而移动，并启用浏览器滚动条以使页面停止缩小？
如果有一种完全不同/更好的方法来解决这个问题，请向我提出所有建议。尝试尽可能多地学习。
非常感谢您的帮助。我的代码如下。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
.bannerBackground
{
width: 100%;
position: absolute;
top: 0;
height: 27px;
background-color: orange;
}
.rightBanner
{
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
height: 27px;
padding-right: 20px;
width: 200px;
text-align: right;
color: #CCCCCC;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
background-color: green;
margin:0;
display: block;
}
.leftBanner
{
white-space: nowrap;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
white-space: nowrap;
margin-bottom: 0px;
width: 645px;
background-color: blue;
height: 27px;
display: block;
}
body
{
font-family: arial;
margin: 0;
padding: 0;
color: #EEEEEE;
}
</style>
</head>
<body>
<div class="leftBanner">
</div>
<div class="rightBanner">
<div>
Some Title Text
</div>
</div>
<div class="bannerBackground">
</div>
</body>
</html>
I'm creating a banner at the top of my page. It's built using 3 banners that will have content. When I horizontally shrink the browser window, my green banner component(on the right) moves with the edge of the screen eventually overlapping or going under my blue banner component (on the left).
How do I set a browser(body?) width at which the banner on the right stops moving with the shrinking browser and instead enable the browser scroll bars so the page stops shrinking?
If there's an entirely different/better way to approach this please throw all suggestions at me. Trying to learn as much as possible.
Your help is much appreciated. My code is as follows.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
.bannerBackground
{
width: 100%;
position: absolute;
top: 0;
height: 27px;
background-color: orange;
}
.rightBanner
{
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
height: 27px;
padding-right: 20px;
width: 200px;
text-align: right;
color: #CCCCCC;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
background-color: green;
margin:0;
display: block;
}
.leftBanner
{
white-space: nowrap;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
white-space: nowrap;
margin-bottom: 0px;
width: 645px;
background-color: blue;
height: 27px;
display: block;
}
body
{
font-family: arial;
margin: 0;
padding: 0;
color: #EEEEEE;
}
</style>
</head>
<body>
<div class="leftBanner">
</div>
<div class="rightBanner">
<div>
Some Title Text
</div>
</div>
<div class="bannerBackground">
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
当您绝对定位元素时，您会将它们从页面流中取出。您可以改为使用浮动。
When you absolutely position elements you take them out of the flow of the page. You can instead use floats.
您需要删除position:absolute。然后，您可以将其全部放入容器 div 中，并使横幅左右浮动，主体位于中间。我就是这么做的。
You need to remove the position:absolute . Then you could put it all in a container div and float the banners left and right with the body in the middle . That's how I'd do it.