logo标签列表

CSS定位：相对定位；底部粘附

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

我期望什么：
- 如果#test的高度大于或等于body的高度，它应该粘在底部（因为块模型的原因已经实现了）
- 如果#test的高度小于body的高度，它应该粘在底部，但是有白色空间在它上面。（这不会发生，#test不会粘在底部）。

-当#test高度高于body时，使用position:absolute不可接受，因为#test将不会影响body的高度。
- 当#test粘在窗口底部时，使用position:fixed不可接受，因为它将粘在窗口底部而不是body。

问：我能否只使用css得到我期望的结果？怎么做？

抱歉我的英语不好，不过我认为问题很容易理解。
谢谢你。

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

更新：

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

更新2：

谢谢大家，不过似乎最简单的方法就是在我的javascript中添加几行代码，以重新计算#test高度变化时的body高度。

3
我猜你正在寻找固定页脚。 - Mr. Alien
你为什么要设置 min-height: 2000px;？这比你的屏幕尺寸还高吗？ - gitaarik
1
只需尝试Ryan Fait Sticky Footer，这里有一个**演示**。 - Hashem Qolami
@Mr_Green 没有帮助 :( - sander
@其他人：#test高度由JS动态更改，因此我无法使用标准的粘性页脚方法，因为它们假定我已经知道页脚的高度。 - sander
显示剩余6条评论
12个回答
30

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

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

Transform 操作的尺寸为元素自身尺寸，因此它将回溯到容器的最底部。您可以使用字母来控制三个轴。

8

由于 #test 的动态高度特性，仅使用 CSS 无法实现此功能。但是，如果您已经在使用 jQuery，则可以通过快速调用 .height() 方法来获取所需内容（需要从 #test 高度中减去将其定位到距顶部 2000px 处的值）。

<style>
body {
    min-height: 2000px;
}

#test {
    position: relative;
    top: 2000px;
} 
</style>

<script>
var testHeight = $("#test").height();
$( "#test" ).css({
    margin-top: -testHeight;
});
</script>
4

使用相对定位是完全可能的。以下是具体步骤。

假设页脚高度为40像素。您的容器使用相对定位，页脚也使用相对定位。您只需添加 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);
}

希望您能从这个实例中获益。

点击此处查看实例

4
我所知道的只有两种纯CSS方法可以创建动态高度的粘性页脚，一种是使用flexbox（不幸的是，IE9及以下版本不支持），另一种是使用CSS表格：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 */
}
display: table-footer-group; 的效果非常好。特别是当 body 元素具有动态高度和 min-height: 100vh; 时。 - Shaun Cockerill
1
#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;"是一种显而易见的方法，如果这会影响您的布局，请在此处发布您的问题。修改内容的CSS比尝试寻找其他方法更容易。

IE6表达式对速度不好，但它可以工作，在这里阅读更多信息：http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202.html

编辑 阅读了您的编辑，请忘记上面的内容。要将其固定在页面底部，只需在HTML中对其进行定位即可。这很简单，请在需要进一步帮助的情况下发布示例代码。默认情况下，将某物定位在页面底部，位置将位于页面底部。

JSFiddle: http://jsfiddle.net/TAQ4d/ 如果你确实需要。

我来试着解释一下：1）使用我的问题中的代码。2）将position:relative更改为position:absolute。#test会停留在body的底部，这很好。3）在#test的样式中添加“height:3000px”。它仍然位于body的底部（很好），但是body仍然是2000px，而#test的1000px被隐藏在body上面（这很糟糕）。 - sander
1
简短回答：不能仅使用纯CSS实现此功能，因为它与页面正常流程的方向相反（我是指从底部到顶部）；您可以使用此插件stickyjs，非常易于使用；请将其与bottomSpacing: 0一起使用。
编辑： 该插件也使用position: fixed！ 然后，我认为您应该自己编写或找人为您编写它:D
我本来就很担心这个问题，现在我需要在我的js中添加更多的计算。 - sander
据我所知，目前没有类似的东西。 - Homam
@sander 可以使用 HTML5 和 CSS3 实现。请查看我的答案。 - Aditya Ponkshe
0

只用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;
}
0

这是我想出来的解决方案

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

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

这就是我现在要做的。只要 #test 的高度动态变化，我就需要用 JS 来实现。 - sander
0

我也来晚了，但我认为margin-top: auto可以解决问题：

#test {
  margin-top: auto;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接