页脚不停留在底部 [英] Footer not staying at the bottom
问题描述
这似乎是所有时间最令人困惑的问题，至少对我来说。知道这个页面，除了头破坏 - 我复制了HTML，并试图仔细删除WordPress相关的爵士乐，所以你得到的页面的HTML。
我想让你重点是坐在页面中间的页脚。我删除 position：absolute 并且它向下移动....它需要停留在页面底部。
此是位置：固定 这是它留在底部的唯一方式，但看看页脚如何跟随你？ 我不想要。
您可能会说，do min-height：100％这不是我想要的，因为那么高度为100％的容器，行和列类不起作用。
我想要完成的任务是：这种类型的布局。但是你可以看到页脚上升...
是的，我还尝试过 position：relative ： check out position：Relative
所以你可以看到我的链接你的Live页面，从每一个gI在互联网上阅读是正确的方式实现这种类型的布局。，我必须做错什么...
更新1
在你建议我缺少div之前，我已经通过一个div检查器验证了所有的MY示例，并且div是正确的。我不缺少任何div。这是一个纯CSS问题
在标记这个x，y和z的副本之前，我提供了三个例子已尝试过，其中没有任何工作：
- position：absolute
- position：relative
- position：fixed - 不是我想要的。页脚必须留在页面底部。
最后，如 min-height：100％ 不可接受作为回答，除非您能指定如何实现< rel =nofollow>这种类型的布局。
我通常这样做的方式是添加位置：相对于HTML和位置：绝对到页脚本身。
主要的缺点是你必须为body设置margin-bottom = footer-height
<！doctype html>
< html>
< head>
< style>
html {
position：relative;
min-height：100％;
}
body {
margin-bottom：100px; //等于页脚高度
}
.footer {
position：absolute;
bottom：0;
left：0;
width：100％;
height：100px;
background-color：yellow;
}
< / style>
< / head>
< body>
< div class =footer> footer< / div>
< / body>
< / html>
查看结果 https://jsfiddle.net/jy0gsgm4/
This seems to be the most perplexing issue of all time, at least for me. Knowing that this page, aside from the header is broken - I have copied the HTML and tried to carefully remove the WordPress related jazz so you get the html of the page.
What I want you to focus on is the footer sitting in the middle of the page. I remove position:absolute and it sort of moves down.... It needs to stay at the bottom of the page.
This is position:fixed this is the only way it stay at the bottom, but see how the footer follows you? I don't want that.
You might say, do min-height: 100% That is not what I want either because then the container, row and column classes that have height of 100% do not work.
What I am trying to accomplish is: this type of layout. But as you can see the footer rides up...
Yes I have tried position:relative as well: check out position:Relative
So as you can see The Live page I linked you too, from everythin gI read on the internet is the right way to achieve this type of layout., How ever I must be doing something wrong ...
Update 1
Before you suggest I am missing divs, I have validated through a div checker for all of MY example and the divs are correct. I am not missing any divs. This is a pure css issue
Before you mark this a duplicate of x, y and z - I have provided three examples of the positions I have tried and none of them has worked:
- position:absolute
- position:relative
- position:fixed - Not what I want. The footer MUST stay at the bottom of the page.
Finally, as stated min-height: 100% on the wrapper (or any other element) is not acceptable as an answer unless you can specify how I can achieve this type of layout.
The way i usually do this, is to add position: relative to html and position: absolute to the footer itself.
The main disadvantage that you have to set margin-bottom=footer-height for the body
<!doctype html>
<html>
<head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 100px; // is equal to footer height
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="footer">footer</div>
</body>
</html>
See the result https://jsfiddle.net/jy0gsgm4/
这篇关于页脚不停留在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
