Возможно ли иметь нижний колонтитул с автоматической высотой и прокручиваемой областью содержимого выше?

Question

Возможно ли иметь нижний колонтитул с автоматической высотой и прокручиваемой областью содержимого выше?

0

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

HTML

<div class="container">
   <div class="scrollArea">
      a<br/>b<br/>c<br/>d<br/>
      a<br/>b<br/>c<br/>d<br/>
      a<br/>b<br/>c<br/>d<br/>
      a<br/>b<br/>c<br/>d<br/>
   </div>
   <div class="footer">
      <!-- the contents of the footer will determine the height needed -->
   </div>
</div>

CSS

.container {
    position: relative;
    height: 100%;
    width: 100%;
}

.scrollArea {
    position: absolute;
    top: 0px;
    bottom [height of sticky footer]; left: 0px;
    right: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.footer {
    position: absolute;
    bottom: 0px;
    height: [height of sticky footer];
    left: 0px;
    right: 0px;
}

Rob 04 окт. 2013, в 21:57

Источник

0

возможное дублирование Flexbox и вертикальной прокрутки в приложении полной высоты с использованием NEWER Flexbox API
cimmanon 04 окт. 2013, в 20:20

Теги:

javascript

html

css

sticky-footer

1 ответ

Ещё вопросы

возможное дублирование Flexbox и вертикальной прокрутки в приложении полной высоты с использованием NEWER Flexbox API

Blake Mann · Answer 1 · 2013-10-04T18-16-00.000Z

Вы не хотите использовать position: absolute; на все это. Это очень затруднит стиль, потому что абсолютный элемент технически не имеет высоты (с точки зрения других элементов). Вы еще больше сбиваете с толку, используя "метод растягивания" использования нижнего, левого, верхнего и правого всех 0.

Ваш вопрос также немного запутан с точки зрения того, как будет установлена высота. Должен ли он быть установлен через javascript? Через медиа-запросы? Если это один из этих случаев, вы можете легко установить высоту области прокрутки с помощью того же метода, что позволяет им менять в тандеме.

Если по какой-то причине вам нужно установить только высоту для этого одного элемента, вы можете позволить свойствам отображения таблицы CSS выполнять работу по вычислению новой высоты для области прокрутки, установив контейнер как display: table; , и добавление другой оболочки вокруг scrollarea. Установка этой обертки и нижнего колонтитула для display: table-row; вытащит их.

Проверьте это, чтобы понять, что я имею в виду:

http://jsfiddle.net/6gprU/3/

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

В качестве окончательного дополнения к этому, есть еще один вариант, который сделает это очень легким. CSS имеет функцию calc():

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Эта функция позволяет выполнять вычисления в css, как и в javascript, и позволит вам устанавливать высоту чего-либо по отношению к чему угодно, динамически. Тем не менее, я ставлю это последним, поскольку поддержка браузера немного ограничена. Он не будет работать в IE 8 или ниже.

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

http://caniuse.com/calc