Question

基本上我有这个布局

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer">
        <img src="" alt=""/>
    </div>
</div>

这个CSS

#container {
    height: 100%;
}

#header {
    height: 8%;
}

#footer img {
    width: 100%;
    height: auto;
}

如您所见，页脚中的图像设置了宽度和相对高度，这意味着页脚的高度将取决于屏幕宽度，无论图像的高度如何。

我需要将内容拉伸到剩余高度，因此页眉，内容和页脚的组合高度等于屏幕的高度（无垂直滚动）。

我可以轻松地使用flexbox，但我正在使用Meteor.js开发应用程序，它将在一个可能不支持flexbox的环境中运行（较旧的Android版本）。

Answer 1

您正在寻找的是“粘性页脚”。

没有FLEXBOX

此版本基于this answer

STANDARD DEMO

html, body {
    height: 100%;
    margin:0;
}


#container{
  display: table;
  height: 100%;
  width: 100%;
  background: yellow;
}


#content{
  display: table-row;
  /* height is dynamic, and will expand... */
  height: 100%;
  /* ...as content is added (won't scroll) */
  background: turquoise;
}

#header {
    height: 8%;
}

h1{
  margin:0;
  padding:0;
}

#footer img {
    width: 100%;
    height: auto;
}

#footer{
  color:lightgrey;
  display: table-row;
}

使用FLEXBOX

此版本基于this article

FLEXBOX DEMO

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


#container{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}


#content{
    flex: 1;
    background:tomato;
}

#header {
    height: 8%;
}

h1{
  margin:0;
  padding:0;
}

#footer img {
    width: 100%;
    height: auto;
}

#footer{
  color:lightgrey;
}

Answer 2

您可以使用CSS表来完成此任务。制作#container display:table和子广告display:table-row。然后，如果页眉和页脚具有高度，则内容高度将相应地调整。在这种情况下，#header的高度明确为8％，#footer的高度由图像的高度决定。

html, body, #container {
    height: 100%;
    padding: 0;
    margin: 0;
}
#header, #content, #footer {
  display: table-row; 

}
#container {
    display: table;
    width: 100%;
}

#header {
    height: 8%;
    background-color: blue;
}

#content {
  background-color: yellow;
}

#footer {
    background-color: green;
}
#footer img {
  width: 100%;
}

以下是jsfiddle的示例。尝试调整结果窗口的宽度和高度。

CSS - Strech div填充屏幕的可用高度（标题固定高度，页脚未知高度）

2 个答案:

没有FLEXBOX

使用FLEXBOX