Вопрос по css, html – Div Expand для визуального заполнения вертикального пространства

18

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

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

Я пробовал несколько решений, которые включали меня, добавляяheight:100%, height:auto; position:relative но это не сработало.

html,
body {
  height: 100%;
  background-color: yellow;
}
header {
  width: 100%;
  height: 150px;
  background-color: blue;
}
header nav ul li {
  display: inline;
  padding: 0 30px 0 0;
  float: left;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -30px 0;
  /* the bottom margin is the negative value of the footer's height */
  position: relative;
}
#wrapper #content {
  background-color: pink;
  width: 400px;
  height: 100%;
  margin: 0 0 -30px 100px;
  padding: 25px 30px 25px 30px;
}
footer {
  margin: -30px 0 0 0;
  width: 100%;
  height: 30px;
  background-color: green;
}
<div id="wrapper">

  <header>
    <div id="logo"></div>

    <nav>
      <ul>
        <li>About</li>
        <li>Menu</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>

  <div id="content">
    content
    <br>goes
    <br>here
  </div>

</div>

<footer>footer</footer>

Error: User Rate Limit Exceededheight:100%Error: User Rate Limit ExceededhtmlError: User Rate Limit ExceededbodyError: User Rate Limit Exceeded ccpizza
Error: User Rate Limit ExceededHow to make a div expand to fit available vertical space? ccpizza

Ваш Ответ

6   ответов
7

html,
body {
  height: 100%;
  background-color: yellow;
}
header {
  width: 100%;
  height: 150px;
  background-color: blue;
}
header nav ul li {
  display: inline;
  padding: 0 30px 0 0;
  float: left;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -30px 0;
  /* the bottom margin is the negative value of the footer's height */
  position: relative;
}
#content {
  background-color: pink;
  width: 400px;
  padding: 25px 30px 25px 30px;
  position: absolute;
  bottom: 30px;
  top: 150px;
  margin-left: 100px;
}
footer {
  margin: -30px 0 0 0;
  width: 100%;
  height: 30px;
  background-color: green;
}
<div id="wrapper">

  <header>
    <div id="logo"></div>

    <nav>
      <ul>
        <li>About</li>
        <li>Menu</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>

  <div id="content">
    content
    <br>goes
    <br>here
  </div>

</div>

<footer>footer</footer>

Error: User Rate Limit Exceededfiddle
Error: User Rate Limit Exceeded Jon
Error: User Rate Limit Exceededoverflow-y: scroll;Error: User Rate Limit Exceeded#contentError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
1

<div style="height:300px;">
  <div style="display:table; height:100%; width:100%;border: 1px solid blue;">
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      Hello          
    </div>
    <div style="display: table-row; height:auto; padding:2px; background-color:green;">
      <div style="height:100%; overflow: auto;">
        <div style="height: 500px"></div>
      </div>
    </div>
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      Gbai
    </div>
  </div>
</div>
8

<html>
  <body>
    <div id="container">
    </div>
  </body>
</html>

html
{
    height: 100%;
}
body
{
    height: 100%;
}
#container
{
    height: 100%;
}

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
-5

Error: User Rate Limit Exceeded
5

<div style="display:flex; flex-direction:vertical;">
    ...header(s)...
    <div style="flex: 1; overflow: auto;">
         As much content as you want.
    </div>
    ...footer(s)...
</div>

Error: User Rate Limit Exceeded
5

<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>

/* Note you could add a container div instead of using the body */
body {
  display: flex;
  flex-direction: column;
}
#header {
  flex: none;
}
#contents {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
}
#footer {
  flex: none;
}

.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

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