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

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 также приветствуются)

10 голосов | спросил Daniel Cerecedo 21 stEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 21 Sep 2011 22:40:41 +0400 2011, 22:40:41

1 ответ


0

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

Просто создайте контейнер, содержащий два элемента 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>
ответил Paul.s 21 stEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 21 Sep 2011 22:52:08 +0400 2011, 22:52:08

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132