Фиксированный заголовок div с прокручиваемым div ниже

Question

Я пытаюсь поместить два деления один над другим. Верхний имеет фиксированный размер. Нижний должен заполнить оставшуюся часть высоты страницы, не увеличивая страницу, если ее содержимое слишком велико.

<div id="content">
    <div id="top-padding"></div>
    <div id="stuff">
        some content
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br>
        End of content.
    </div>
</div><!-- content -->

Моя попытка до сих пор: http://jsfiddle.net/b4fEE/

У меня проблема в том, что зеленый div слишком большой. Мне нужно как способ указать его высоту как

100% - 30px

Я бы предпочел сделать это в чистом CSS, но я прибегну к javascript/jquery, если это необходимо.

Answer 1

Попробуй это:

#stuff {
   overflow-x:auto;
   background-color: lightgreen;
   top:30px;  /* as the height of the other div is 30px */
   left:0;
   right:0;
   bottom:0;
   position:absolute;
}

Рабочая скрипка

Answer 2

В случае, если кто-то хочет решить эту проблему, сохраняя вещи в нормальном режиме, в настоящее время это можно сделать с помощью модели макета flexbox, как показано ниже:

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#content {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
  margin: 0 auto;
  background-color: #C9E6FF;
}
#top-padding {
  height: 30px;
  flex: none;
  background: blue;
}
#stuff {
  flex: auto;
  overflow-y: auto;
  background-color: lightgreen;
}
/*for demo purpose */

#stuff p {
  height: 1000px;
}

<div id="content">
  <div id="top-padding"></div>
  <div id="stuff">
    <p>some content</p>
  </div>
</div>

Answer 3

И в случае, если кто-то захочет решить эту проблему, сохраняя все в нормальном режиме и не используя flex, решение будет следующим:

html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
    }

    #content {
        height: 100vh;
        position: relative;
        background-color: #C9E6FF;
        margin: 0 auto;
        width: 300px;
    }

    #top-padding {
        background: blue;
        height: 30px;
    }

    #stuff {
        overflow-x:auto;
        background-color: lightgreen;
        height: calc(100vh - 30px);
    }

<div id="content">
    <div id="top-padding"></div>
        <div id="stuff">
            <p>Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...</p>
       </div>
   </div>