Html css 位置：相对；坚持到底
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17521178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css position: relative; stick to bottom
提问by sander
<body style="min-height:2000px;">
<div id="test" style="position:relative;bottom:0;">
some dynamically changed content
</div>
</body>
What do i expect:
-If #testheight is greater or equal to body's it should stick to bottom (as it happens now cuz of block model)
-If #testheight is less than body's it should however stick to bottom, having white space above it. (which doesn't happen, #testdoesn't stick to bottom).
我期望什么： -
如果#test高度大于或等于身体，它应该粘在底部（就像现在发生的块模型一样） -
如果#test高度小于身体，它应该粘在底部，上面有空白。（这不会发生，#test不会坚持到底）。
-Using position:absolute is not acceptableas then #testwill not influence body height when #testis higher than body.
-Using position:fixed is not acceptableas then #testwill stick to bottom of window, not body.
- 使用位置：绝对是不可接受的，因为#test当#test高于身体时不会影响身体高度。
- 使用位置：固定是不可接受的，因为那样#test会粘在窗口的底部，而不是身体。
Q: Can I get what I expect using css only? How?
问：我可以只使用 css得到我期望的结果吗？如何？
Sorry for poor English, however I think the question is easy to understand.
Thank you.
抱歉英语不好，但我认为这个问题很容易理解。
谢谢你。
P.S.: I need that in css because some dynamically changed content is changed via js and I want to avoid recalculating #testdiv position each time it changes.
PS：我需要在 css 中使用它，因为一些动态更改的内容是通过 js 更改的，我想避免#test每次更改时重新计算div 位置。
UPD:
更新：
I've also tried some display:inline-block; vertical-align:bottom;stuff still no result.
我也尝试了一些display:inline-block; vertical-align:bottom;东西仍然没有结果。
UPD2:
UPD2：
Thank you guys, still it seems, that easiest way is just to add a couple of lines to my javascript to recalculate body height on #testheight change.
谢谢你们，看起来仍然是最简单的方法就是在我的 javascript 中添加几行来重新计算#test身高变化时的身高。
回答by librewolf
I know it's an old question, but you could try doing:
我知道这是一个老问题，但您可以尝试这样做：
top: 100%;
transform: translateY(-100%);
Transform operates with the size of the element itself, therefore it will climb back to the container at the very bottom. You can use letters for all 3 axis.
Transform 使用元素本身的大小进行操作，因此它会爬回到最底部的容器。您可以对所有 3 个轴使用字母。
回答by Durthar
Because of the dynamic height nature of #test you cannot do this with CSS alone. However, if you're already using jQuery, a quick .height() call should be able to get you what you need (#test height needs to be subtracted from positioning it 2000px from the top).
由于#test 的动态高度特性，您不能单独使用 CSS 来做到这一点。但是，如果您已经在使用 jQuery，那么快速的 .height() 调用应该能够满足您的需求（#test height 需要从距顶部 2000px 的位置中减去）。
<style>
body {
min-height: 2000px;
}
#test {
position: relative;
top: 2000px;
}
</style>
<script>
var testHeight = $("#test").height();
$( "#test" ).css({
margin-top: -testHeight;
});
</script>
回答by Ilya Streltsyn
The only two pure-CSS ways to create sticky footer of dynamic height I know are using flexboxes (no support in IE9-, unfortunately) and using CSS tables:
我所知道的唯一两种创建动态高度粘性页脚的纯 CSS 方法是使用 flexboxes（不幸的是，IE9 不支持）和使用CSS 表：
html, body {
height: 100%;
margin: 0;
}
body {
display: table;
width: 100%;
min-height:2000px;
}
#test {
display: table-footer-group;
height: 1px; /* just to prevent proportional distribution of the height */
}
回答by Aditya Ponkshe
It is very much possible using relativeposition. this is how you do it.
使用relative位置很有可能。这就是你的方式。
Assume height of your footer is going to be 40px. Your container is relativeand footer is also relative. All you have to do is add bottom: -webkit-calc(-100% + 40px);. your footer will always be at the bottom of your container.
假设页脚的高度将为 40px。您的容器是relative，页脚也是relative。您所要做的就是添加 bottom: -webkit-calc(-100% + 40px);. 您的页脚将始终位于容器的底部。
HTML will be like this
HTML 会是这样
<div class="container">
<div class="footer"></div>
</div>
CSS will be like this
CSS 会是这样
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.footer{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
Hope this helps.
希望这可以帮助。
回答by Nick Bull
#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE6 */
* html #footer{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
JSFiddle: http://jsfiddle.net/As3bP/- position: fixed; is the obvious way of doing this, and if this affects your layout, try posting your problems here. It'd be easier to modify the CSS of your content than trying to find another way of doing this.
JSFiddle：http: //jsfiddle.net/As3bP/- 位置：固定；是这样做的明显方法，如果这会影响您的布局，请尝试在此处发布您的问题。修改内容的 CSS 比尝试寻找其他方法更容易。
The IE6 expression is not good for speed at all but it works, read about that here: http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202.html
IE6 表达式根本不利于速度，但它有效，请在此处阅读：http: //developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202 .html
EDITRead your edits, please forget the above. To be stuck at the bottom of the body, it'd be easy to position it in your HTML. This is simple stuff, please post example code if you need further help. Positioning something at the bottom of the page, by default, positions at the bottom of the page.
编辑阅读您的编辑，请忘记以上内容。要卡在正文的底部，很容易将其定位在您的 HTML 中。这是简单的东西，如果您需要进一步的帮助，请发布示例代码。在页面底部定位某物，默认情况下，定位在页面底部。
JSFiddle: http://jsfiddle.net/TAQ4d/if you really actually need that.
JSFiddle：http: //jsfiddle.net/TAQ4d/如果你真的需要它。
回答by Homam
short answer: No YOU can't do this with pure css because it is just the reversed direction to the normal flow of page (I mean bottom to top);
you can use this plugin which is very easy to use stickyjs;
use it with bottomSpacing: 0
简短的回答：不，你不能用纯 css 来做到这一点，因为它只是页面正常流动的相反方向（我的意思是从下到上）；
你可以使用这个插件，它非常容易使用stickyjs；
使用它bottomSpacing: 0
EDIT
this plugin uses position: fixedtoo!
then I think you should write it down by yourself or have someone to write it for you :D
编辑
这个插件也使用position: fixed！
那我觉得你应该自己写下来或者找人帮你写 :D
回答by Ritabrata Gautam
if u dont want to use position:absolute; left:0; bottom:0;then u may try simple margin-top:300px;...
如果你不想使用position:absolute; left:0; bottom:0;那么你可以尝试简单的margin-top:300px;......
回答by CHlM3RA
Yes it is Posiible with CSS only:
是的，它仅适用于 CSS：
HTML:
HTML：
<body>
<div id="test">
some dynamically
changed content
</div>
</body>
CSS:
CSS：
body{
line-height: 2000px;
}
#test{
display: inline-block;
vertical-align: bottom;
line-height: initial;
}
If you want to have the text on the bottom of the screen then you can use:
如果您想在屏幕底部显示文本，则可以使用：
body {
line-height: 100vh;
margin: 0px;
}
回答by V? Minh
here are solution I come up with
这是我想出的解决方案
<ul class="navbar">
<li><a href="/themes-one/Welcome"> Welcome <i></i></a></li>
<li><a href="/themes-one/Portfolio"> Portfolio <i></i></a></li>
<li><a href="/themes-one/Services"> Services <i></i></a></li>
<li><a href="/themes-one/Blogs"> Blogs <i></i></a><i class="arrow right"></i>
<ul class="subMenu">
<li><a href="/themes-one/Why-Did-Mint-Net-CMS-Born"> Why Did Mint Net CMS Born <i></i></a></li>
<li><a href="/themes-one/Apply-AJAX-and-Mansory-in-gallery"> Apply AJAX and Mansory in gallery <i></i></a></li>
<li><a href="/themes-one/Why-did-Minh-Vo-create-Mint-Net-CMS"> Why did Minh Vo create Mint Net CMS <i></i></a></li>
</ul>
</li>
<li><a href="/themes-one/About"> About <i></i></a></li>
<li><a href="/themes-one/Contact"> Contact <i></i></a></li>
<li><a href="/themes-one/Estimate"> Estimate <i></i></a></li>
</ul>
<style>
.navbar {
display: block;
background-color: red;
height: 100px;
}
li {
display: table-cell;
vertical-align: bottom;
height: 100px;
background-color: antiquewhite;
line-height: 100px;
}
li > a {
display: inline-block;
vertical-align: bottom;
line-height:initial;
}
li >ul {
display: none;
}
</style>
回答by user2625636
Old post, I know, but yet another solution would be to create a wrapper for your content with a minimal height of 100vh - footerHeight this solution requires that you know the height of the footer...
旧帖子，我知道，但另一种解决方案是为您的内容创建一个最小高度为 100vh 的包装器 - footerHeight 此解决方案要求您知道页脚的高度...
<body>
<div class="wrapper">
your content
</div>
<div class="footer">
footer content
</div>
</body>
and your css would look like this:
你的css看起来像这样：
.wrapper {
min-height: calc( 100vh - 2em );
}
.footer {
height: 2em;
}
