Div展开到视觉填充垂直空间 [英] Div Expand to Visually Fill Vertical Space

问题描述

我有一个页面包含标题，内容和页脚。页眉和页脚是固定的高度，我想内容调整其高度，以便动态适应页眉和页脚之间。我计划在我的内容中放置一个背景图像，因此它实际上填充了未占用的垂直空间的其余部分是至关重要的。

我使用 Sticky Footer 方法，以确保页脚保留在页面底部。

我尝试了几个解决方案，其中包括添加 height：100％ ，height：auto;位置：相对，但它不工作。

  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;高度：100％; margin：0 0 -30px 0; / *底部边距是页脚高度的负值* / position：relative;}＃wrapper #content {background-color：pink; width：400px;高度：100％; margin：0 0 -30px 100px; padding：25px 30px 25px 30px;} footer {margin：-30px 0 0 0;宽度：100％; height：30px; background-color：green;}  

 < div id = wrapper> < header> < div id =logo>< / div> < nav> < ul> < li>关于< / li> < li>菜单< / li> < li>特价< / li> < / ul> < / nav> < / header> < div id =content>内容< br>在< br>在这里< / div>< / div>< footer> footer< / footer>  

解决方案

尝试将css更改为：

div class =snippetdata-lang =jsdata-hide =false>

  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;高度：100％; margin：0 0 -30px 0; / *底部边距是页脚高度的负值* / 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;宽度：100％; height：30px; background-color：green;}  

 < div id = wrapper> < header> < div id =logo>< / div> < nav> < ul> < li>关于< / li> < li>菜单< / li> < li>特价< / li> < / ul> < / nav> < / header> < div id =content>内容< br>在< br>在这里< / div>< / div>< footer> footer< / footer>  

您可能不想设置宽度，填充，边距等。的包装。此外，使用绝对定位，您可以将内容的底部和顶部拉到您想要的位置。

这里是你在做什么，我想。

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>

解决方案

Try changing your css to this:

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>

You probably don't want to be setting the width, padding, margins, ect. of the wrapper. Also, with absolute positioning you can pull the bottom and top of the content to where you want them.

Here's what you are after, I think.

这篇关于Div展开到视觉填充垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！