Размещение колонтитула после переполненного элемента с высотой: 100%

Из-за некоторых причин, у меня есть такой сценарий:Размещение колонтитула после переполненного элемента с высотой: 100%

HTML:

<body> 
<div id="ng-scope"> 
    <p> 
     [[VERY LONG TEXT]] 
    </p> 
</div> 
<div id="footer">Footer</div> 
</body>

CSS:

html,body{ 
    height: 100% 
} 

#ng-scope { 
    height: 100%; 
    background-color:red; 
} 

#footer{ 
    background-color: green; 
}

Демо: http://jsfiddle.net/x3zbufhk/

Что я хочу сделать, это разместить нижний колонтитул внизу страницы, а не посередине.

Так далеко я обнаружил, что я могу сделать это с помощью перепускной прокрутки или авто свойства:

#ng-scope { 
    height: 100%; 
    background-color:red; 
    overflow:scroll; 
}

Однако, у меня есть событие JQuery, спровоцированные $ (окно) .scroll, что перестает работать, когда Я использую прокрутку переполнения или авто.

Поэтому, мой вопрос, есть ли другой способ позиционирования этого нижнего колонтитула в конце?

(или в качестве альтернативы: как сделать событие прокрутки JQuery для работы в этом сценарии)

Спасибо большое!

EDIT: Я хочу, чтобы элемент # ng-scope был на 100% высотой страницы, даже если текст очень короткий. Вот почему мне нужно иметь html и тело с высотой: 100%. Поведение, которое я хочу, когда у меня есть длинный текст:

html,body{ 
    height: auto; 
} 

#ng-scope { 
    height: 100%; 
    background-color:red; 
} 

#footer{ 
    background-color: green; 
}

http://jsfiddle.net/getg811q/

И когда у меня есть короткий текст:

html,body{ 
    height: auto; 
} 

#ng-scope { 
    height: 100%; 
    background-color:red; 
} 

#footer{ 
    background-color: green; 
}

http://jsfiddle.net/hcpr96ar/

Я хотел бы получить это поведение для длинных и коротких текстов, используя тот же css.

источник

2015-01-04 user1294122

Если высота body элемента должна быть 100%, завернуть как #ng-scope DIV и нижний колонтитулы внутри общего родителя:

http://jsfiddle.net/getg811q/

<div id='wrapper'> 
    <div id='ng-scope'> 
    a lot of content... 
    </div> 
    <div id='footer'>Footer</div> 
</div>

источник

2015-01-04 02:34:04

Большое спасибо за Ваш ответ! К сожалению, мне нужно, чтобы html и body были высотой: 100%. Я хочу, чтобы # ng-scope был «полноэкранным», но иногда он переполняется, а нижний колонтитул переходит в неправильное положение ... – user1294122

Проблема с этим решением заключается в том, что если я не укажу высоту в #wrapper, тогда #ng -score больше не соответствует высоте страницы: http://jsfiddle.net/04hospnu/. И если вы поставили высоту: 100% на #wrapper, вы получите поведение, которое я хочу: http://jsfiddle.net/mmvbd65g/, но это решение не работает, когда у вас длинный текст: http: // jsfiddle .net/qw44sdx8 /. – user1294122

Размещение колонтитула после переполненного элемента с высотой: 100%

ответ

Смежные вопросы