html - 试图将一个元素始终放在我的 div 的底部

Question

我正在尝试对齐我的 <span class="fechar_fancy">Back/span>在我的 div 底部，无论我内容的高度如何，我都希望这个元素始终位于底部。

所以我想给 position:absolute和 bottom:0到我想放在底部的元素，并相对于容器定位，但它不起作用。

有人知道为什么它不起作用吗？？

这是我尝试的 fiddle : http://jsfiddle.net/KHU7h/1/

我的 html:

<div id="janela_fancybox-container">
  <div id="janela_fancybox">
    <h2>Title</h2>
    <span id="data">Date time today</span> <br /> 
    <img class="img_principal" src="../image1.jpg"/>
    <p>
    Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text                 Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text                 Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text                 Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    </p>
    <span class="fechar_fancy"><strong>Back</strong></span>
  </div>
</div>

我的CSS:

#janela_fancybox
{   
    text-align:center;
    width:100%;
    margin:0 auto 0 auto;
    background:#fff;
    position:relative;


}

#janela_fancybox .img_principal 
{
    width:180px;
    height:200px; 
    float:left;
    margin-right:10px;
    border:5px solid #f3f3f3;
    margin-top:15px;
}



#janela_fancybox #data
{
    width:100%;
    color:#ccc;
    font-size:13px; 
    text-align:center;
    color:#7a7a7a;
}


#janela_fancybox h2
{
    width:100%;
    color:#004B97;
    font-size:16px; 
    text-align:center;  
}

#janela_fancybox p
{
    font-size: 14px;  
    text-align:justify;
    line-height:25px;
    height:25px;    
    word-spacing:-2px;
    width:96%;
    margin-top:15px;
}

#janela_fancybox .fechar_fancy
{
    float:left; 
    text-decoration:none; 
    font-size:15px; 
    color:#000; 
    width:100%;
    text-align:center;
    cursor:pointer;
    position:absolute;
    bottom:0;
} 

Answer 1

我看到的主要问题是 #janela_fancybox p 有 height:25px。这可以防止 #janela_fancybox 的高度随文本内容而扩展。我删除了高度:

#janela_fancybox p {
    ...
    /*height:25px;*/
}

此外，绝对定位元素可以使用 left:0 来确保它从左侧开始并扩展到 100% 宽度。 float 不是必需的:

#janela_fancybox .fechar_fancy {
    /*float:left; */
    ...
    left:0;
}

而且，绝对定位的元素往往会与文本内容重叠。我在容器底部添加了一些填充物以确保底部有空间用于“后退”链接:

#janela_fancybox {  
    ...
    padding-bottom:25px;    
}

WORKING EXAMPLE (jsfiddle)

---

附言在这种情况下，我认为没有必要绝对定位该元素。它可以只是在文本之后的 position:relative。当然，您的应用程序可能比此处介绍的更多。

Here's a demonstration.