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

时间:2013-02-01 09:59:55

标签: javascript jquery html css positioning

我正在尝试调整我一直在努力的图像滑块。我要做的是当用户在浏览器上调整大小时,保持滑块与浏览器左侧相同的位置。请查看以下示例

            +------------------------+
            |          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");

1 个答案:

答案 0 :(得分:0)

也许你可以通过你的问题得到更详细的信息,我从你解释的内容看起来像这样,并且不需要任何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>