里面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

您必须设置height和width到html和body代码。

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和{{1}它的父级无法填充所需的空间。