css position：relative;坚持底部

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

什么我想到：
- 如果#test高度大于或等于身体应该坚持下（因为它现在发生的Cuz块模型）
- 如果#test高度不然而，它应该坚持到底部，在它上面有空白区域。（这不会发生，#test不沾底）。css position：relative;坚持底部

- 使用位置是：绝对是不能接受的作为然后#test不会影响身体高度时#test比主体更高。
- 使用位置：固定不可接受因为然后#test将坚持窗口的底部，而不是身体。

Q：我能得到什么，我只用 CSS 期待？怎么样？

对不起，英文不好，但是我认为这个问题是很容易理解。
谢谢。

P.S：我需要在CSS因为一些动态变化的内容是通过js的改变，我想避免重新计算每次改变时间#test DIV位置。

UPD：

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

UPD2：

谢谢你们，仍然似乎是最简单的方式就是几行添加到我的JavaScript来重新计算#test高度改变车身高度。

来源

2013-07-08 sander

我想你正在寻找粘性页脚.. –

如果你真的在寻找粘性页脚试试这个 - http://mystrd.at/modern-clean-css-sticky-footer/。到目前为止的最佳解决方案 – jQuery00

我的天堂没有遇到任何“粘性页脚”解决方案：固定或绝对。我想知道，如果有的话。 – sander

#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/如果你真的需要这个。

来源

2013-07-08 07:36:29

我会尽力解释：1）从我的问题中取出代码.2）更改位置：相对于位置：绝对。 #test坚持身体的底部，这很好。 3）将＃height：3000px添加到＃test的样式。它仍然在身体的底部（好），但身体仍然是2000像素，1000像素的#test隐藏在身体之上（这很糟糕）; – sander

简短的回答：不，你不能这样做纯CSS，因为它仅仅是翻领方向页面的正常流动（II意味着底部到顶部）;
你可以使用这个非常容易使用的插件stickyjs;
用它来与bottomSpacing: 0

编辑
这plgin usese固定的位置呢！
那么我认为你应该把它写下来自己或让别人来写吧：d

来源

2013-07-08 07:39:48 Homam

我很害怕这个。现在我需要为我的js添加更多计算。 – sander

，据我所知，有没有这样的 – Homam

@sander它可能使用html5和css3。检查我的答案。 –

如果u不想使用position:absolute; left:0; bottom:0;然后ü可以尝试简单margin-top:300px; ...

来源

2013-07-08 08:20:04

这就是我现在要做的。只要#test高度动态变化，我将需要用JS做到这一点。 – sander

只有两个纯

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-08 08:27:34

这是非常有可能使用relative位置：-CSS方式来创建动态高度我知道正在使用flexboxes（在IE9-不支持，遗憾的是），并使用CSS tables的粘页脚。这是你如何做到的。

假设您的页脚高度将是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

希望这有助于。

来源

2015-02-06 12:20:43

因为动态高度自然#TEST你不能单独用CSS做到这一点的。但是，如果你已经使用jQuery，快速.height（）调用应该能够得到你所需要的（#TEST高度需要从从顶部将其定位2000像素减去）。

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

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

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

来源

2015-04-22 05:53:12 Durthar

是的，它是Posiible只有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-21 08:23:08 CHlM3RA

-1

我们做这样的：

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

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

来源

2016-05-12 10:38:24

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

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

变换与元素本身的大小进行操作，因此它会在最底层爬到回容器。所有3轴都可以使用字母。

来源

2016-06-16 13:58:54

这里有解决方案，我想出了

<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-02 10:00:45

-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-24 22:46:07 user2625636

css position：relative;坚持底部

回答

相关问题