代码之家 › 专栏 › 技术社区 › raveren

主要内容周围的背景元素有问题

scrollbar background css

raveren · 技术社区 · 15 年前

我有一个网站,我需要把两个图片放在页面顶部内容的每一侧。暂时可以到达[删除]。

如果你的分辨率足够宽,你可以看到左右红色圣诞装饰都与主要内容对齐。但是,如果浏览器的宽度小于1300px,则右侧的滚动条不会从页面流中取出并创建一个水平滚动条。

我通过将两个绝对定位的背景分区放置到相对定位的分区中实现了这两种装饰:

<div id="alignment"> <!-- position:relative -->
 <div></div> <!-- first image: position:absolute;right:-210px -->
 <div></div> <!-- second one: position:absolute;right:915px -->
</div>

尽管绝对定位的元素应该从文档流中取出,但第二个图像不是:(因此,底部的滚动条出现了。

我尝试过:

用910px(内容宽度)的空白空间分别制作两个饰品的图像,只使用一个绝对的DIV而不是两个:同一版本
将上述图像添加为 no-repeat top center 背景 <html> 结果只显示了一个背景。要么我把雪花放在 body 背景是纯白的背景上的红色装饰物。后者取决于这两个元素(body或html)中哪个元素具有作为背景的图像。
将图像分割放置在绝对分割中并使两个相对(与当前情况相反)-同一问题且不显示在 < IE8

我知道并且很抱歉这是一个大问题,很难理解。我研究了很多,没有想法。任何可能的尝试解决方案都将非常感谢。另外,我意识到我链接到的站点的编码正处于糟糕的边缘,但是我刚刚开始着手工作,所以请不要对此发表评论:)

2 回复 | 直到 15 年前

raveren 15 年前

最后的解决方案是创建一个DIV,该DIV在正文后立即打开并封装 全部的 内容,在正文之前关闭。DIV的样式:

background: url('/client/images/xmas-burbulai.png') no-repeat top center;

巴布亚新几内亚本身是两个装饰,我想在身体的每一边。这两张照片都被粘贴到一张照片上,其中910px的空白间隙介于-身体的确切宽度之间。

无滚动条,跨浏览器,时尚。

Orson 15 年前

尝试将此DIV(AlignMen)设置为:

溢出:隐藏;

更新:

<div id="main"> //Position this relatively
   <div> //Positon this absolutely, this height should be the max of the two floated divs
     //In here 
     <div>Left</div>//Float Left
     <div>Right</div>//Float Right
   </div>
<div>

推荐文章

Ryan Pergent · Firefox scrollTop在添加内容时保持相同的相对位置

7 年前

yossico · Winforms TreeView滚动条不会一直滚动

7 年前

Anu · 泳衣。min.js滚动条:强制滚动条

7 年前

Bilal Sehwail · 统一:隐藏滚动条时禁用滚动拖动

7 年前

user1323 · 滚动条在与交互之前不会采用框架样式

7 年前

Youssef · 边框窗格-JavaFX场景生成器-滚动条向下按钮不可见

7 年前

Crundee MC · 如何删除溢出导致的滚动条?

7 年前

sergi martinez · SWING禁用或隐藏滚动条,但启用控制盘?

7 年前

Kyle Delaney · 在内容的矩形变换被内容大小调整器更新后,如何使Unity Scroll Rect滚动到底部?

7 年前

Alberto Muñoz Sánchez · 禁用文本区域中的垂直滚动条

7 年前