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

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

22 голосов
/ 28 февраля 2010

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

Ответы [ 3 ]

8 голосов
/ 28 февраля 2010

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>
3 голосов
/ 28 февраля 2010

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

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

0 голосов
/ 09 сентября 2017

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

Нет похожих вопросов

...