我如何能定位我的div在其容器的底部?

不要在底部使用"position:absolute"作为粘性页脚。那么你可以这样做:

html, body { height: 100%; margin: 0; } .wrapper { min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px; } .footer{ background: #000; text-align: center; color: #fff; } .footer, .push { height: 50px; } <html> <body>  <div class="wrapper"> <div class="content">content</div> <div class="push"></div> </div> <footer class="footer">test</footer> </body> </html>

2019-10-31 11:23:30

如果你想让它“粘”在底部，不管容器的高度如何，那么绝对定位是要走的路。当然，如果版权元素是容器中的最后一个，它将始终位于底部。

你能详细说明一下你的问题吗?准确解释你想要做什么(以及为什么你不想使用绝对定位)?

2009-02-08 17:12:05

不要在底部使用"position:absolute"作为粘性页脚。那么你可以这样做:

html, body { height: 100%; margin: 0; } .wrapper { min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px; } .footer{ background: #000; text-align: center; color: #fff; } .footer, .push { height: 50px; } <html> <body>  <div class="wrapper"> <div class="content">content</div> <div class="push"></div> </div> <footer class="footer">test</footer> </body> </html>

2019-10-31 11:23:30

可能不是。

指定位置:相对于#容器，然后position:绝对;底部:0;#版权。

2009-02-08 17:13:26

如果您使用内联块元素的文本对齐特性知道#容器的高度，您确实可以在不使用position:absolute的情况下将方框对齐到底部。

在这里你可以看到它的行动。

这是代码:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

2013-06-07 04:26:31

对于容器中只有一个子div的容器，可以使用表格单元格和垂直对齐方法，这种方法可以可靠地将单个div定位在父div的底部。

注意，使用table-footer-group作为前面提到的其他答案将破坏父表的高度计算。

#{容器显示:表; 宽度:100%; 身高:200 px; ｝ #{项显示:表格单元; vertical-align:底部; ｝ < div id = "容器" > <div id="item">单个底部项目</div> < / div >

2016-11-16 11:31:39

我如何能定位我的div在其容器的底部?

推荐文章

最新文章

标签