[英]How to place a div inside a bigger scrollable div at particular position
I have a div with height = 10*screen-height. 我有一个高度= 10 * screen-height的div。
I want to add another smaller div to it with height = screen height 我想向其添加另一个较小的div,高度=屏幕高度
Assuming that I can add 10 such smaller div's onto the bigger div, I want to add this div at particular position on the bigger div. 假设我可以在较大的div上添加10个这样的较小div,我想将此div添加到较大div上的特定位置。 Say starting from 4*screenheight pixel. 从4 *屏幕高度像素开始。 How do I do that using jQuery? 我该如何使用jQuery?
Presumably you already have the screen height stored, and the two divs created at the correct heights, so: 大概您已经存储了屏幕高度,并且以正确的高度创建了两个div,因此:
$(inner_div).css('position', 'relative').css('top', 4*screen_height);
You may not need position:relative
in your style if it's in your css already 您可能不需要position:relative
对于您的样式(如果已经在CSS中)
See here how you can access and manipulate the body's height and the big div's inners afterwards; 之后,请在此处查看如何访问和操纵身体的高度和大div的内部;
HTML 的HTML
<div id="biggy">
<div class="smally">Smally :)</div>
<div class="smally">Smally 2, don't forget me :D</div>
</div>
CSS 的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 的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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.