придерживаться прокручивать DIV в нижней части экрана

Question

У меня есть приложение Cordova с помощью JQuery, JQuery-мобильный, iscroll и iscrollview

Я точно не стремится к какой-либо из этих инструментов.

У меня есть jquery-mobile header/footer, прикрепленный к верхней и нижней части экрана.

У меня есть прокручиваемый div между верхним и нижним колонтитулом. Он будет содержать переменные объемы данных. Иногда данные будут меньше высоты div, а иногда они будут больше (отсюда и прокрутка)

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

Как только верхняя часть прокручиваемого div является fille по содержанию, я хочу, чтобы ее можно было прокрутить.

Неужели кто-нибудь смог добиться чего-то подобного?

Answer 1

Вот вам аккуратный маленький трюк.

<div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div> 

Теперь CSS

div { 
    width: 100%; 
} 

.header { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 50px; 
} 

.footer { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    height: 100px; 
} 

/* the magic */ 
.content { 
    position: absolute; 
    top: 50px; /* matches height of header */ 
    bottom: 100px; /* matches height of footer */ 
    left: 0px; 
    overflow: scroll; 
} 

Аккуратная вещь о принуждении .content иметь как верх и низ, что она простирается DIV, так что это всегда правильная высота. Если вы указали высоту на нем, это не сработает, но поскольку высота определяется свойством top/bottom, она является динамической. Я думаю, это приведет вас туда, где вы хотите быть.

Here's a fiddle

Edit: Here's what it looks like with content

---

Edit 2 - форсирование содержание расти со дна.

Я не уверен, что это хорошая идея, и я не уверен, что когда-либо серьезно порекомендую делать так. Однако, используя вертикальное выравнивание, можно заставить контент расти снизу. Я подозреваю, что было бы лучше просто установить запас с javascript, который уменьшился по мере роста контента, но ... может быть, нет. Со всем этим сказано, вот один способ делать что-то с CSS.

Для этого требуется небольшая реструктуризация содержимого div.

<div class="content"> 
    <span class="margin"></span> 
    <span class="inner"></span> 
</div> 

И немного больше CSS

span.left-margin { 
    height: 98%; 
    width: 0px; 
    display: inline-block; 
} 

span.inner { 
    width: 99%; 
    background-color: white; 
    display: inline-block; 
    vertical-align: bottom; 
} 

It looks like this with a little content

It looks like this with a lot of content

Если вы хотите полосу прокрутки, чтобы прилипнуть ко дну, как содержание приходит, вам нужно сделать некоторый javascript (легко для того чтобы google оно).

Я не совсем доволен тем, что делаю это так, потому что, если вы задаете высоту 100% или ширину 100%, содержимое div автоматически будет иметь полосу прокрутки с самого начала. Однако ... он выглядит довольно хорошо и должен работать в большинстве (если не всех) браузерах.