Question

<body style="min-height:2000px;">
    <div id="test" style="position:relative;bottom:0;">
         some dynamically changed content
    </div>
</body>

我的期望是什么：
- 如果#test高度大于或等于身体的高度，它应该坚持到底部（因为它现在发生在块模型中） - 如果#test高度小于身体的高度，它应该粘在底部，上面有白色空间。（这不会发生，#test不会坚持到底。）

- 使用位置：绝对不可接受，因为当#test高于正文时，#test不会影响身高。
- 使用位置：固定是不可接受的，因为#test会粘在窗口的底部，而不是身体。

问：我能否得到我所期望的仅使用css ？怎么样？

抱歉英语不好，但我觉得这个问题很容易理解谢谢。

P.S。：我需要在css中使用，因为一些动态更改的内容通过js更改，我希望避免每次更改时重新计算#test div位置。

UPD：

我还尝试了一些display:inline-block; vertical-align:bottom;的东西，但仍然没有结果。

UPD2：

谢谢你们，似乎仍然是，最简单的方法就是在我的javascript中添加几行来重新计算#test高度变化时的身高。

Answer 1

由于#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>

Answer 2

我知道这是一个老问题，但您可以尝试：

top: 100%;
transform: translateY(-100%);

变换以元素本身的大小运行，因此它将爬回到最底部的容器。你可以使用所有3轴的字母。

Answer 3

创建动态高度粘性页脚的唯一两种纯CSS方法我知道正在使用flexbox（不幸的是在IE9中不支持）并使用CSS tables：

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 */
}

Answer 4

使用relative位置非常有可能。这就是你如何做到的。

假设您的页脚高度为40px。您的容器为relative，页脚也为relative。您所要做的就是添加bottom: -webkit-calc(-100% + 40px);。您的页脚将始终位于容器的底部。

HTML会像这样

<div class="container">
  <div class="footer"></div>
</div>

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);
}

Live example here

希望这会有所帮助。

Answer 5

#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/ - 位置：固定;这是显而易见的方法，如果这会影响您的布局，请尝试在此处发布您的问题。修改内容的CSS比试图找到另一种方法更容易。

IE6表达式根本不适合速度，但它有效，请在此处阅读：http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202.html

编辑阅读您的修改，请忘记以上内容。要卡在身体的底部，很容易将它放在HTML中。这很简单，如果您需要进一步的帮助，请发布示例代码。默认情况下，位于页面底部的位置位于页面底部。

JSFiddle：http://jsfiddle.net/TAQ4d/如果你真的需要它。

Answer 6

简短的回答：不，你不能用纯css这样做，因为它只是正常页面流的反转方向（ii表示从下到上）;
你可以使用这个易于使用的插件stickyjs;
与bottomSpacing: 0

一起使用

修改
这个plgin也使用固定位置！
那么我认为你应该自己写下来或让别人为你写下来：D

Answer 7

如果您不想使用position:absolute; left:0; bottom:0;，那么您可以尝试简单margin-top:300px; ...

Answer 8

是的，它仅适用于CSS：

HTML：

<body>
    <div id="test">
        some dynamically
        changed content
    </div>
</body>

CSS：

body{
    line-height: 2000px;
}

#test{
    display: inline-block;
    vertical-align: bottom;
    line-height: initial;
}

JSFiddle

如果您想在屏幕底部显示文字，则可以使用：

body {
    line-height: 100vh;
    margin: 0px;
}

Answer 9

这是我提出的解决方案

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

Answer 10

我们喜欢这样：

HTML：

<body>
   <div id="bodyDiv">
      <!-- web site content is here -->
   </div>
</body>
<footer>
   <!-- Footer content is here -->
</footer>

Jquery的：

$( document ).ready(function() 
{
   $('#bodyDiv').css("min-height",screen.height);
});`

根据屏幕分辨率动态更改内容元素min-height属性。

Answer 11

旧帖子，我知道，但另一个解决方案是为您的内容创建一个包装器，最小高度为100vh - footerHeight 这个解决方案要求您知道页脚的高度......

<body>
  <div class="wrapper">
    your content
  </div>
  <div class="footer">
    footer content
  </div>
</body>

你的css看起来像这样：

.wrapper {
  min-height: calc( 100vh - 2em );
}
.footer {
  height: 2em;
}

css职位：相对;坚持到底

11 个答案: