html - 将 div 内的 div 推到适用于 IE7 的最底部

Question

我遇到了一个小问题，我无法对齐并获得与 IE7 中的 chrome 相同的效果。我想要完成的是将具有背景的 div 推到容器 div 的底部。

JS 小提琴：http: //jsfiddle.net/mn34r/

代码

<div class="container">
  <img style="padding-top:20px; padding-bottom:20px" src="img/img.png">
  <div class="description"><br>
  <span style="font-weight:bold;font-size:15px;">Harry's Nose</span><br>

  <button class="btn btn-small btn-primary" type="button"><i style="color:#fff;
  </i>Read More</button>
 </div>
</div>

CSS：

.container{
    border:solid 1px #e2e2e2;
    height:327px;
    text-align:center;
    position:relative;
}

.description{
    height:110px;
    background-color:#F1F1F1;
    text-align:center;
    bottom:0;
    width:100%;
    position:absolute
}

任何帮助将不胜感激。

谢谢你。

Answer 1

在 IE7 top:overwritesbottom:中，您需要使用带有 CSS 表达式的 IE6/7 hack。

#forceBottom {
  position:absolute;
  top:expression(
     document.documentElement.scrollTop +  
     document.documentElement.clientHeight - 
     this.clientHeight
  );
}