24 
<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获得我期望的结果吗？如何？

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

PS：我需要在 css 中这样做，因为一些动态更改的内容是通过 js 更改的，我想避免#test每次更改时重新计算 div 位置。

升级版：

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

UPD2：

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

4

11 回答 11

25

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

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

Transform 使用元素本身的大小进行操作，因此它将爬回最底部的容器。您可以对所有 3 个轴使用字母。

于 2016-06-16T13:58:54.683 回答
8

由于#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>
于 2015-04-22T05:53:12.740 回答
4

我知道创建动态高度的粘性页脚的唯一两种纯 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 */
}
于 2013-07-08T08:27:34.517 回答
3

relative使用位置很有可能。这就是你的做法。

假设您的页脚高度为 40 像素。您的容器是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);
}

现场示例在这里

希望这可以帮助。

于 2015-02-06T12:20:43.510 回答
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/ - 位置：固定；是这样做的明显方法，如果这会影响您的布局，请尝试在此处发布您的问题。修改内容的 CSS 比尝试找到另一种方法更容易。

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

编辑阅读您的编辑，请忘记上述内容。要卡在正文的底部，很容易将其定位在您的 HTML 中。这是简单的东西，如果您需要进一步的帮助，请发布示例代码。在页面底部放置一些东西，默认情况下，位于页面底部。

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

于 2013-07-08T07:36:29.367 回答
1

简短的回答：不，你不能用纯 css 做到这一点，因为它只是页面正常流程的相反方向（我的意思是从下到上）；
你可以使用这个非常容易使用stickyjs的插件；
与它一起使用bottomSpacing: 0

编辑
这个插件position: fixed也使用！
那我觉得你应该自己写或者找人给你写:D

于 2013-07-08T07:39:48.270 回答
0

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

于 2013-07-08T08:20:04.570 回答
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;
}
于 2016-04-21T08:23:08.153 回答
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>
于 2017-07-02T10:00:45.333 回答
-1

旧帖子，我知道，但另一种解决方案是为您的内容创建一个最小高度为 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;
}
于 2017-08-24T22:46:07.843 回答
-1

我们这样做：

html:

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

查询：

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

根据屏幕分辨率动态更改内容元素的最小高度属性。

于 2016-05-12T10:38:24.360 回答