在调整大小时保持 div 的位置与溢出相同？答案

【问题标题】：Keep position of div with overflow same on resize?在调整大小时保持 div 的位置与溢出相同？
【发布时间】：2013-01-16 14:42:55
【问题描述】：

我目前正在尝试调整我一直在研究的图像滑块。我要做的是在用户调整浏览器大小时保持滑块与浏览器左侧相遇的相同位置。看看下面的例子

            +------------------------+
            |          body          |
+--------------------------------------------------+
|           |                                      |
|           |<- Keep this aligned at the same      |
|           |    position on browser resize?       |
|           |                                      |
|           |                                      |
|           |                                      |
+--------------------------------------------------+
            |                        |
            +------------------------+


HTML:
<div id="scrollerWrapper">
    <div id="imageScroller">
        <img class="i" href="..." />
        <img class="i" href="..." />
        <img class="i" href="..." />
        <img class="i" href="..." />
    </div>
</div>

    browserHeight = parseInt($(window).height(), 10);

    galleryMargin = browserHeight * 0.025;
    imageHeight = browserHeight - 80 - (galleryMargin * 2);
    if (imageHeight < 250) {
        imageHeight = 250;
    }
    $(".i").css("height", imageHeight + "px");

【问题讨论】：

您的js 代码在window.load 或window.resize 中吗？
window.resize 在 $(window).load() 内
滚动包装器的 CSS 是什么样的？
请创建 jsfiddle.net 示例。

标签： javascript jquery html css positioning

【解决方案1】：

也许您可以更详细地了解您的问题，我从您解释的内容中了解到的内容看起来像这样，并且不需要任何 javascript

小提琴在这里http://jsfiddle.net/caramba/LzwUP/

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0px; margin:0px; }
</style>
</head>
<body>
    <div style="position:absolute;width:100%;height:400px;background-color:orange;">
        <div style="position:relative;left:0px;top:100px;width:500px;height:200px;background-color:navy;"></div>
    </div>
</body>
</html>

【讨论】：