html - 获取 Div 背景图片到 "overflow"往上

标签 html css overflow

我正在尝试使用 Div 创建一个滚动条(它会动态变大)正如您从下面的屏幕中看到的那样,我在对齐左下角的 div 时遇到了问题。

这是我的问题:

我的问题的图片:http://i.stack.imgur.com/KQL6b.png

我的 jsFiddle:http://jsfiddle.net/13fhcumo/

我的 HTML:

<body>
<div id="scrolltop"><div id="scrollsideright"></div></div>
<div id="scrollmiddle">
</div>
<div id="scrollbottom"><div id="scrollsideleft"></div></div>
</body>

如您所见,右侧的 DIV 及其伴随的背景图像重叠得很好,但我需要底部的 Div 向上重叠,而不是向下重叠。有谁能够帮助我?我不能使用绝对定位,因为页面的长度是动态的。

我应该补充一点,在上图中,在 html 中,右上角的 div 在“scrolltop”div(向右浮动)内,左下角的 div 在“scrollbottom”div 内,向左浮动。

最佳答案

这是解决方案,也许这不是您要找的答案。

在您的 fiddle 中,如果您更新 #scrollsideleft 以添加 ma​​rgin-top: calc(362px - 650px),即可解决问题。

#scrollsideleft {
    border: 1px solid red;
    background-image: url(scrollleftsidebottom.png);
        background-color: #444;
    height: 650px;
    width: 210px;
    float: left;
    margin-top: calc(362px - 650px);
}

关于html - 获取 Div 背景图片到 "overflow"往上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27030390/

相关文章:

javascript - 在动画过程中,我的动画 div 向上故障而不是向下故障

html - 将垂直滚动条应用于内容框,而不是正文/视口(viewport)

android - 溢出:自动在 Android 上不工作或工作不一致

html - 调整网页大小时永远不会出现滚动条

javascript - 在选中复选框之前隐藏 div

php - 如何通过hyperlink-url提交参数并在php中检索它们?

javascript - 当另一个函数调用时,函数不会触发

javascript - 使用 CSS 的银河结构

html - 如何使 div 视口(viewport)高度,而不是 CSS 中的页面高度?

javascript - 在图像 slider 动画中获得平滑过渡