html – Div展开以目视填充垂直空间

概述我有一个页面，有一个标题，内容和页脚。页眉和页脚具有固定的高度，我希望内容调整其高度，以便它在页眉和页脚之间动态配合。我打算在我的内容中放置一个背景图像，所以至关重要的是它实际上填满了剩下的空闲垂直空间。 我使用Sticky Footer方法确保页脚保持在页面的底部。然而，这不会使内容跨越剩余空间的整个高度。 我已经尝试了几个解决方案，涉及我添加高度：100％，height：auto;位置：相对， 我有一个页面，有一个标题，内容和页脚。页眉和页脚具有固定的高度，我希望内容调整其高度，以便它在页眉和页脚之间动态配合。我打算在我的内容中放置一个背景图像，所以至关重要的是它实际上填满了剩下的空闲垂直空间。

我使用Sticky Footer方法确保页脚保持在页面的底部。然而，这不会使内容跨越剩余空间的整个高度。

我已经尝试了几个解决方案，涉及我添加高度：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;  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>

解决方法 尝试将您的CSS更改为：

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>

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

这是what you are after，我想。

总结

以上是内存溢出为你收集整理的html – Div展开以目视填充垂直空间全部内容，希望文章能够帮你解决html – Div展开以目视填充垂直空间所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。