Как создать DIV с вертикальным прокручиваемым содержимым и фиксированным нижним колонтитулом, который всегда виден? - PullRequest
Новая
       4

Как создать DIV с вертикальным прокручиваемым содержимым и фиксированным нижним колонтитулом, который всегда виден?

12 голосов
/ 21 сентября 2011

HTML должен выглядеть следующим образом (извините за формат и форматирование, но я не знаю, как опубликовать образец HTML) 

<div id="dialog-window">
  <div id="scrollable-content">
    what ever content here...div's, ul's and li's
  </div>
  <div id="footer">
  </div>
</div>

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

Я попробовал некоторые идеи из других постов, но они не соответствуют всем требованиям. Любые идеи сделать это с помощью CSS (также приветствуются js и jquery)

1 Ответ

23 голосов
/ 21 сентября 2011

Как насчет чего-то подобного ниже?

Просто создайте контейнер, содержащий два элемента div, один для прокручиваемого содержимого и один для нижнего колонтитула. Исправьте все высоты и сделайте прокрутку содержимого div.

CSS (я не буду взимать плату за свой опытный выбор цвета): 

#dialog-window {
  height: 200px;
  border: 1px black solid;
}

#scrollable-content {
  height: 180px;
  overflow: auto;
  background-color: blue;
}

#footer {
  height: 20px;
  background-color: green;
}

Пример HTML 

<div id="dialog-window">

  <div id="scrollable-content">
    <ul>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
    </ul>
  </div>

  <div id="footer">
  </div>

</div>
...