html - Div Expand to Visually Fill Vertical Space

Question

Welcome To Ask or Share your Answers For Others

html - Div Expand to Visually Fill Vertical Space

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Div Expand to Visually Fill Vertical Space

I have a page that has a header, content, and footer. The header and footer are of fixed height, and I'd like the content to adjust its height so that it fits dynamically between the header and footer. I am planning to put a background-image in my content, so it is critical that it actually fills the rest of the unoccupied vertical space.

I used the Sticky Footer approach to ensure that the footer remains on the bottom of the page. This however does not make the content span the entire height of the remaining space.

I have tried several solutions which involved me adding height:100%, height:auto; position:relative but it did not work.

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T19:39:34+0000

The trick about height:100% is that it requires all of the parent containers to be have their heights set as well. Here's an html example

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

in order for the container div with a height set to 100% to expand dynamically to the height of the window you need to make sure that the body and html elements have their heights set to 100% as well. so...

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

would give you a container that expands to fit your window. then if you need to have footer or header that floats above this window you can do so with z indexing. This is the only solution I've found that fills the vertical height dynamically.

Categories

html - Div Expand to Visually Fill Vertical Space

html - Div Expand to Visually Fill Vertical Space

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags