里面的粘性页脚div(sticky footer inside tow div)

里面的粘性页脚div(sticky footer inside tow div)

我试图制作一个始终保持在底部的粘性页脚。 但我的页脚不是第一个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与页脚重叠。 我想要将页脚高度自动保留。 有没有解决方案？ 提前致谢。

I am trying to make a sticky footer that always stay at the bottom. But my footer is not direct child of the first div, its the second child. Like This 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>

But the problem is here - it does not take the full height of device screen and content div is overlapped by the footer. I want to left the footer height auto. Is there any solution?? Thanks in advance.

最满意答案

您必须为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 ，则无法填充所需的空间。 
You have to set a height and width to html and body tags.
 
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> 
  
 
 
This is because when you use height and width with percentages, it take its value from its parent so if you do not set a value to the height and width of its parent it cannot fill the space required.