Как сделать div расширяться, чтобы соответствовать доступному вертикальному пространству?

Я ищу способ сделать div, содержащий содержимое моей главной страницы, для расширения, чтобы он соответствовал пространству, оставшемуся после добавления моего верхнего и нижнего колонтитулов. HTML выглядит так:

<div id="wrapper">
    <div id="header-wrapper">
        <header>
            <div id="logo-bar"></div>
        </header>
        <nav></nav>
    </div>
    <div id="content"></div>
</div>


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

Он сконструирован таким образом, что нижний колонтитул всегда находится в нижней части страницы, установив минимальную высоту #wrapper на 100%. Проблема в том, что #content не расширяется, чтобы заполнить пустое пространство внутри #wrapper, что затрудняет получение требуемого внешнего вида. Как я могу заставить это сделать это?

Ответы

Ответ 1

EDIT:
Почему бы не использовать верх и низ. Вот полный пример.
Вы можете настроить верхнее и нижнее значения, чтобы оптимизировать размещение заголовка/нижнего колонтитула.

<html>
 <head>
  <style type="text/css">
   BODY {
     margin: 0;
     padding: 0;
   }

   #wrapper {
     position: relative;
     height: 100%;
     width: 100%;
   }

   #header-wrapper {
     position: absolute;
     background-color: #787878;
     height: 80px;
     width: 100%;
   }

   #content {
     position: absolute;
     background-color: #ababab;
     width: 100%;
     top: 80px;
     bottom: 50px;
   }

   #footer-wrapper {
     position: absolute;
     background-color: #dedede;
     height: 50px;
     width: 100%;
     bottom: 0;
   }
  </style>
 </head>
 <body>
  <div id="wrapper">
    <div id="header-wrapper">
      <div id="header">
        <div id="logo-bar">Logo</div>
      </div>
      <div id="nav"></div>
    </div>
    <div id="content">Content</div>
    <div id="footer-wrapper">
      <div id="footer">Footer</div>
    </div>
  </div>
 </body>
</html>

Ответ 2

Хорошая статья для нижних колонтитулов находится в List Apart: http://www.alistapart.com/articles/footers/

Он имеет фактический пример того, как вы размещаете нижний колонтитул внизу с расширением содержимого div.

Ответ 3

Это решение разрешает проблемы с прокруткой. При увеличении страницы нижний колонтитул помещается в 2 строки из всего содержимого:

   <style>
       #container {
        position: relative;
        height: 100%;
     }
     #footer {
        position: absolute;
        bottom: 0;
     }
    </style>

    </HEAD>

    <BODY>

     <div id="container">

        <h1>Some heading</h1>

    <p>Some text you have</p> 

    <br>
    <br>

    <div id="footer"><p>Rights reserved</p></div>

    </div>

    </BODY>
    </HTML>