2013-04-17 3 views
0

У меня есть div с высотой = 10 * высота экрана.Как разместить div внутри большего прокручиваемого div в определенном положении

Я хочу добавить еще один небольшой DIV к нему с высотой = высотой экрана

Если предположить, что я могу добавить 10 таких небольшие Див-е на большом DIV, я хочу, чтобы добавить этот DIV в определенном положении на большом дел. Скажем, начиная с 4 * screenheight pixel. Как это сделать с помощью jQuery?

+1

У вас есть код, который вы можете отправить, чтобы показать, что вы уже пробовали? – Ryan

+1

или создайте скрипку http://jsfiddle.net/ с кодом, поэтому нам будет легко экспериментировать. – Spokey

ответ

1

Предположительно вы уже высота экрана сохраняется, и две дивы созданы на правильной высоте, так:

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

Вам не нужно position:relative в вашем стиле, если это в вашем CSS уже

+0

вы можете использовать .css ({'position': 'relative', 'top': 4 * screen_height}) тоже – steo

+0

Теперь я немного грустен, что написал весь этот код: P – 2013-04-17 21:56:56

0

Смотрите здесь, как вы можете получить доступ и управлять ростом тела и потомками большого диванов;

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); 
}); 
Смежные вопросы