html - 拖车 div 内的粘性页脚

Question

我正在尝试制作一个始终位于底部的粘性页脚。但我的页脚不是第一个 div 的直接子元素，它是第二个子元素。像这样https://jsfiddle.net/bduswush/

<div id="outer-wrap">
    <div id="inner-wrap">
        <div class="head">This is head</div>
        <div class="content">This is body</div>
        <div class="footer">This is footer</div>
    </div>
</div>

但问题就在这里——它没有占据设备屏幕的整个高度，内容 div 被页脚重叠。我想自动离开页脚高度。有什么解决办法吗？？提前致谢。

Answer 1

您必须为 html 和 body 标签设置 height 和 width。

html,body{
  height: 100%;
  width: 100%;
  border: 0;
}

html,body{
  height: 100%;
  width: 100%;
  border: 0;
}
#outer-wrap {
	height: 100%;
  background: #ccc;
}
#inner-wrap {
	min-height: 100%;
	position: relative;
  background: #00b;
}
.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
  background: red;
}

<div id="outer-wrap">
		<div id="inner-wrap">
			<div class="head">This is head</div>
			<div class="content">This is body</div>
			<div class="footer">This is footer</div>
		</div>
</div>

这是因为当您将 height 和 width 与百分比一起使用时，它会从其父项中获取值，因此如果您没有为 height 设置值 和其父级的 width 无法填充所需的空间。