Как заставить отделение расшириться для установки доступному вертикальному пространству?

Question

Как заставить отделение расшириться для установки доступному вертикальному пространству?

Я ищу способ сделать отделение, которое содержит мое основное содержание страницы для расширения для установки пространству, оставленному после добавления моего заголовка и нижнего колонтитула. 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, мешая получать взгляд, который я хочу. Как я могу заставить его сделать это?

22

html css

задан vilhalmer 28 February 2010 в 16:24

2 ответа

Другие вопросы по тегам:

html css

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

score 3 · Answer 1

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

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

score 8 · Answer 2

РЕДАКТИРОВАТЬ:
Почему бы не использовать верх и низ. Вот полный пример.
Вы можете настроить верхнее и нижнее значения, чтобы оптимизировать размещение верхнего / нижнего колонтитула.

<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>