css - 为什么右侧的div启用水平滚动条？

Question

我想要实现的目标

• 居中文本内容后面有两个重叠的背景 div。
  • 一个在文本内容 div 的左下角。
  • 一个在文本内容 div 的右上角。
  • 两者都应该稍微落后于正文内容。
  • 两者都应附加到文本 div。
• 只有当窗口的宽度小于 div.text 的宽度时，水平滚动条才应该可见。
• 另外，如果两个背景 div 超出可见区域，则它们不应启用水平滚动条。

我已经拥有的

• 查看此 simple JsFiddle example .在 Chrome 25 和 FireFox 19 中测试。

问题

现在，如果我减小窗口宽度以使蓝色和红色框超出可见区域，则会显示水平滚动条。但是，如果我在 div.right 上设置 display: none;，则不会显示滚动条。

如何使用 div.right 获得所需的功能，以便在蓝色和红色框被窗口框架截断时，水平滚动条保持隐藏状态？是否有一个很好的、跨浏览器兼容的解决方案？

编辑

在我的实际网站上，红色和蓝色框将包含一个图像，所以我也在考虑将 bg-images 切成两半，并将较小的部分设置为 background-image 内容部分。

Answer 1

您只能使用 CSS 来完成，方法是使用 CSS3 Calc 并将正文设置为 position: relative。

现场演示:http://jsfiddle.net/AMC93/

HTML

<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="text">Lorem ipsum dolor sit amet, etc</div>

CSS

html, body {
    padding: 0;
    margin: 0;
    position: relative;
}
.wrapper {
    position: absolute;
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.right {
    margin: 0 auto;
    position:absolute;
    background-color: red;
    width: 100px;
    height: 100px;
    z-index: -1;
    top: 0;
    right: calc(50% - 230px);
}
.left {
    margin: 0 auto;
    position:absolute;
    background-color: blue;
    width: 100px;
    height: 100px;
    z-index: -2;
    left: calc(50% - 230px);
    bottom: 0;
}
.text {
    width: 300px;
    min-height: 500px;
    height: auto;
    z-index: 800;
    text-align: justify;
    margin: 0 auto;
    overflow-x: auto;
}