css：我如何确保一个html元素始终在页面的底部？

说我有这样的html代码：css：我如何确保一个html元素始终在页面的底部？

<html> 
<body> 
<div id="Div1" style="position:relative"> 
    <span style="position:absolute;top:100px">My text</span> 
</div> 
<div id="Div2"> 
Test 
</div> 
</body> 
</html>

我应该怎么做才能让Div2的总是低于Div1构成不管Div1构成的内容？由于跨度在Div1中使用position：absolute，因此Div2的内容会出现在Div1的内容之上。

来源

2009-09-11 Anthony

请粘贴您使用的CSS。 – Santi 2009-09-11 16:19:18

没有其他的CSS。 – Anthony 2009-09-11 16:35:50

原因DIV2显示上述DIV1是因为Div2的绝对定位。这意味着div1不参与正常的文档流程，就好像它被从文档中拉出一样。所以，div2出现在顶部，然后你的绝对定位将div1降低到100px。

将绝对定位关闭div1，然后使用边距或填充将其向下移动到所需的位置。这样，正常的html渲染将把div2放在div1下面。

如果您被迫绝对定位div1，那么您还需要绝对定位div2。您可能需要使用JavaScript来计算div1的高度，并适当设置div2的顶部。

<html> 
<body> 
<div id="Div1" style="position:absolute; top: 100px;"> 
    <span>My text</span> 
</div> 
<div id="Div2" style="position:absolute; top: 130px;"> 
Test 
</div> 
</body> 
</html>

来源

2009-09-11 17:19:41

或者只是将Div2嵌套到该span/div中，并将margin-top放在它上面，然后...;） – Gavrisimo 2009-09-11 17:36:07

-2

使用display：block;在这些div

来源

2009-09-11 16:18:42 Jeff

Div是默认的块。 – 2009-09-11 16:20:42

确实。它没有任何区别。 – Anthony 2009-09-11 16:23:07

杰夫：div是作为标准块元素，所以不会有任何区别。

你可以尝试：

<div id="Div1" style="position:relative; display:inline-block"> 
    <span style="position:absolute;top:100px">My text</span> 
</div> 
<div id="Div2"> 
    Test 
</div>

来源

2009-09-11 16:44:19 Jafu

谢谢，但它没有任何区别。 Div2仍然出现在Div1之上。 – Anthony 2009-09-11 17:03:10

为什么不这样做呢？

<div id="Div1" style="margin-top:100px"> 
    <span>My text</span> 
</div> 
<div id="Div2"> 
Test 
</div>

我不明白你为什么这样做。你能解释一下你想做什么吗？我敢肯定有更好的办法

来源

2009-09-11 17:10:22 marcgg

我编辑了我的答案，这应该工作...除非你真的需要绝对定位到所有地方 – marcgg 2009-09-11 17:14:41

基本上我有2个Divs，我希望Div2低于Div1的任何内容。实际上，Div1包含一些图像，并且这些图像使用绝对定位位于Div1内。我希望Div2的内容低于Div1中的图像。 – Anthony 2009-09-11 17:16:37

你做了什么工作，但你改变了问题。 Div1的内容使用绝对定位进行定位。 – Anthony 2009-09-11 17:18:27

你想div2低于div1或在页面的最底部？如果你想在div1下面，然后加

clear:both;

到div2。

如果你想让它固定在页面的底部，然后用在DIV2固定位置属性

来源

2009-09-11 17:13:14 marauder

这不起作用 – Anthony 2009-09-11 17:20:48

也许这样的事？

<html> 
<body> 
    <div id="Div1" style="position:relative"> 
     <div style="position:absolute;top:0">just some text<br />very long text<br />very long text<br />very long text<div id="Div2" style="margin-top:30px">div thats always below(30px's below)</div></div>  
    </div> 
</body> 
</html>

来源

2009-09-11 17:34:16 Gavrisimo

其他人已经正确回答了这个问题关于位置：相对位置：绝对和容器div中的页面流。

只是添加到答案。当我了解如何在CSS中定位时，我发现以下教程非常有用。

Learn CSS Positioning in Ten Steps

来源

2009-09-11 18:19:51

css：我如何确保一个html元素始终在页面的底部？

回答

相关问题