javascript - 如何在特定位置将 div 放置在更大的可滚动 div 中

Question

我有一个高度 = 10 * 屏幕高度的 div。

我想添加另一个较小的 div 高度 = 屏幕高度

假设我可以将 10 个这样的小 div 添加到更大的 div 上，我想在更大的 div 上的特定位置添加这个 div。说从 4*screenheight 像素开始。我如何使用 jQuery 做到这一点？

Answer 1

大概您已经存储了屏幕高度，并且在正确的高度创建了两个 div，所以：

$(inner_div).css('position', 'relative').css('top', 4*screen_height);

position:relative如果它已经在你的 CSS 中，你可能不需要你的风格

Answer 2

请参阅此处，之后如何访问和操作身体的高度和大 div 的内部；

JSfiddle

HTML

<div id="biggy">
    <div class="smally">Smally :)</div>
    <div class="smally">Smally 2, don't forget me :D</div>
</div>

CSS

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#biggy {
    width: 200px;
    background-color: orange;
    position: relative;
}

.smally {
    width: 100%;
    background-color: blue;
    color: white;
    text-align: center;
    position: absolute;
}

JavaScript

$(document).ready(function() {
    var bh = $('body').height();
    var smally_offset = (bh / 10);

    // Set biggy to be the body's height
    $('#biggy').css('height', bh);

    // Make all smallies 10% of the set height
    $('.smally').css('height', smally_offset);

    // Handle the different smallies :)
    $('.smally:nth-child(1)').css('top', smally_offset * 0);
    $('.smally:nth-child(2)').css('top', smally_offset * 1);
});