如何将div放置到容器的底部，而不使用绝对定位？

我有一个非常困难的CSS问题。我有以下布局（这只是画图快速样机）：如何将div放置到容器的底部，而不使用绝对定位？

我需要飘起了红色框底部的它的容器。通常我会使用position: absolute; bottom: 0;，但这会导致文本与div重叠，这是我不想要的。我希望盒子的行为像第二张图片一样（相同的情况，但有更多的文字）

这甚至有可能吗？我不介意倾销对很老的浏览器的支持。

2013-09-23 Compizfox

两个页脚看起来是不同的高度，是不是应该降低高度时，有更多的内容或者是只是一个绘图问题 –

@PatrickEvans无这只是一个绘图问题。我在Paint中做了一个快速素描;） – Compizfox

不要放弃position: absolute。只需在容器底部添加填充，使其等于页脚div的高度。

#outer{ 
    position: relative; 
    padding-bottom: 55px; 
} 

#foot{ 
    position: absolute; 
    height: 55px; 
    width: 100%; 
    bottom: 0; 
    left: 0; 
}

没有填充：http://jsfiddle.net/cG5EH/2

随着填充：http://jsfiddle.net/cG5EH/1

来源

2013-09-23 21:33:27

哇，这真的把我推向了正确的方向，谢谢！但是，这会导致容器的长度比本来的长55px（在本例中）。通常页面适合屏幕，但现在它不会因为它长55px。问题是，我需要将其应用到Joomla模板，我还没有想出它是如何设置它的高度... – Compizfox

没关系，修复它。谢谢，这对我很有帮助。 – Compizfox

非常简单但有效的解决方案。为什么我没有想到这个？ – amandathewebdev

试试这个。 calc允许你在你的css中进行计算。在这个例子中，我强制高度为100％，但这可以是任何值，甚至可以是height: calc(100% + 80px)。注意数学运算符周围的空格。

看到http://css-tricks.com/a-couple-of-use-cases-for-calc/更多细节

<html> 
<header> 
    <style type="text/css"> 
     .container{ 
      height:100%; 
      padding-bottom: 80px; 
      box-sizing: border-box; //ensures the padding is part of the 100% height. 
      position:relative; 
      background-color: blue; 
     } 

     .base{ 
      position:absolute; 
      top:calc(100% - 80px);/*80px arbitary height of the element*/ 
      height:80px; 
      width:100%; 
      background-color: yellow; 
     } 

    </style> 
</header> 
<body> 
    <div class="container"> 
     <div class="base"> 
      sdfgsdfg 
     </div> 
    </div> 
</body>

来源

2013-09-23 22:06:30 otherDewi

如何将div放置到容器的底部，而不使用绝对定位？

回答

相关问题