Div на всю свободную высоту со скроллом

Kovalen · November 22, 2012

Здравствуйте!

Как можно сделать, чтобы левая колонка занимала всю свободную высоту между шапкой и подвалом и при этом имела вертикальную прокрутку (содержимого в ней будет не меньше 4-5 экранов)? И чтобы при этом не появлялась вертикальная прокрутки всей страницы. Сейчас задал ей высоту жестко в пикселях - height: 600px;. Соответственно, на малых разрешениях имею нежелательный вертикальный скролл всей страницы и "наплыв" подвала на левую колонку, а на больших - кучу свободного места между левой колонкой и прикрученным к низу подвалом.

Ну, и до кучи хотелось бы, чтоб высота правой колонки (независимо от количества текста в ней) всегда равнялась высоте левой

Вот нынешний макет: http://kovalen.ru/test.html

CSS


body {
    font: 11pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
    margin: 0; /* Отступы на странице */
   }
   h1 {
    font-size: 36px; /* Размер шрифта */
    margin: 0; /* Убираем отступы */
    color: #fc6; /* Цвет текста */
   }
   h2 {
    margin-top: 0; /* Убираем отступ сверху */
   }
   #header { /* Верхний блок */
    background: #0080c0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
   #sidebar { /* Левая колонка */
    float: left; /* Обтекание справа */
    border: 1px solid #333; /* Параметры рамки вокруг */
        overflow: scroll;
    width: 300px; /* Ширина колонки */
    padding: 5px; /* Поля вокруг текста */
    margin: 10px 10px 20px 5px; /* Значения отступов */
        height: 500px;
   }
   #content { /* Правая колонка */
    margin: 10px 5px 20px 330px; /* Значения отступов */
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
        height: 100%;
   }
#footer {
    position: fixed; /* Фиксированное положение */
    left: 0; bottom: 0; /* Левый нижний угол */
    padding: 10px; /* Поля вокруг текста */
    background: #39b54a; /* Цвет фона */
    color: #fff; /* Цвет текста */
    width: 100%; /* Ширина слоя */
    clear: left; /* Отменяем действие float */
   }

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=win-1251" />
  <title>Байки из склепа</title>
 </head>
 <body>
  <div id="header"><h1>Байки из склепа</h1></div>
  <div id="sidebar">
    <p><a href="b_all.html">Все байки</a></p>
    <p><a href="b_author.html">Байки по автору</a></p>
    <p><a href="b_theme.html">Байки по теме</a></p>
    <p><a href="b_popular.html">Популярные байки</a></p>
    <p><a href="b_last.html">Последние байки</a></p>
    <p><a href="b_all.html">Все байки</a></p>
    <p><a href="b_author.html">Байки по автору</a></p>
    <p><a href="b_theme.html">Байки по теме</a></p>
    <p><a href="b_popular.html">Популярные байки</a></p>
    <p><a href="b_last.html">Последние байки</a></p>
    <p><a href="b_all.html">Все байки</a></p>
    <p><a href="b_author.html">Байки по автору</a></p>
    <p><a href="b_theme.html">Байки по теме</a></p>
    <p><a href="b_popular.html">Популярные байки</a></p>
    <p><a href="b_last.html">Последние байки</a></p>
    <p><a href="b_all.html">Все байки</a></p>
    <p><a href="b_author.html">Байки по автору</a></p>
    <p><a href="b_theme.html">Байки по теме</a></p>
    <p><a href="b_popular.html">Популярные байки</a></p>
    <p><a href="b_last.html">Последние байки</a></p>
    <p><a href="b_all.html">Все байки</a></p>
    <p><a href="b_author.html">Байки по автору</a></p>
    <p><a href="b_theme.html">Байки по теме</a></p>
    <p><a href="b_popular.html">Популярные байки</a></p>
    <p><a href="b_last.html">Последние байки</a></p>
  </div>
  <div id="content">
    <h2>Алтарь демона </h2>
    <p>Утром, при ярком солнечном свете, всё выглядело совсем не так и мрачно, как 
       планировалось, а даже наоборот. От свечей остались одни потёки, «кровь» 
       смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо 
       сохранились только рисунки мелом, но и они были скорее прикольные, чем злые и загадочные. 
       Дети с неподдельным интересом разглядывали изображения, но без тени тех чувств, которые 
       испытали взрослые ночью при луне.</p>
    <p>Тем не менее, оказался один человек, на которого работа произвела большое 
       впечатление, — сторож лагеря. Днём он подошёл к автору «алтаря».</p>
    <p>— Ваша работа? - начал сторож, кивая в сторону площади.
       — А что такое? 
       — Ну, как же... Тут кровь..., перья птицы мёртвой...,
знаки какие-то страшные нарисованы..., 
       а у вас всё же дети маленькие, они испугаться могут...</p>
  </div>
  <div id="footer">© Влад Мержевич</div>
 </body>
</html>

Заранее спасибо!

PS Блин, так и не смог понять, как делается подсветка кода на форуме(

psywalker · November 22, 2012

Когда-то тут делал что-то похожее, только с контентом.

Kovalen · November 23, 2012

psywalker, спасибо большое! Сделал с помощью абсолютного позиционирования, как в вашем примере.

Sign In

Div на всю свободную высоту со скроллом

Question

Kovalen

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Kovalen

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information