CSS JQuery Начальная позиция Div относительно размера окна

Question

У меня длинный макет страницы. Основной контейнер-контейнер со всем содержимым предназначен для того, чтобы начинаться с нижней части страницы (белый ящик, выглядывающий снизу, достаточно, чтобы увидеть логотип, прежде чем пользователь должен прокрутить, чтобы увидеть больше).

Проблема заключается в разных размерах экрана и разных браузерах размера, основной контейнер div начинается с разных высот сверху, показывая больше или меньше, чем предполагалось, когда пользователь впервые прибывает.

Моя мысль заключается в том, что мне нужно будет использовать js для вычисления окна. Высоту, вычесть высоту объема контейнера, который я хочу изначально показать, а затем обернуть все это в обработчик события, который отслеживает изменение размер браузера.

Однако я ноб с JQuery и не могу понять это. Любые примеры или учебные пособия, которые будут лидировать?

Answer 1

Если я правильно понял, для этого вам не нужен JavaScript. Поместите div абсолютно на 100% сверху, а затем установите margin-top на отрицательное значение.

CSS:

body, html {height: 100%;} 

.section-1 { 
    margin-top: -60px; /* Whatever value you want peeking out */ 
    position: absolute; 
    top: 100%; 
} 

Смотрите рабочую JSFiddle здесь: http://jsfiddle.net/dsundy/5kt8P/1.

Answer 2

Сделано скрипку для этого: http://jsfiddle.net/QQaZp/1/

В принципе, набор все, что вы хотите, расположенный (я использовал только DIV, но вы должны использовать #whateverID) в положение абсолютного в вашем CSS. При загрузке и изменении размера в javascript просто установите верхнее свойство на то, что $(window).height() (я вычитал 50px из этого, чтобы он немного подглядывал)