我试图制作一个始终保持在底部的粘性页脚。 但我的页脚不是第一个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.
更多推荐
发布评论