固定高度div底部显示问题

入行三年，觉得自己还是一个菜鸟。什么东西都懂一些，但是都不很深入 。决定以后要一个case，一个case的搞懂。j

今天开发一个项目，固定高度，文字需要在底部显示，这么简单的一个问题搞了很久，就别谈什么效率了。回家想了一下，总结出四个方法

1. 用margin-top

fixHeight {
height: 200px;
border: 1px solid #F00;
}
.fixHeight .bottomShow{
margin-top: 160px;
}

<div class="fixHeight">
<p class="bottomShow">margin-top</p>
</div>

这个方法不足时，如果修改了p的高度，需要改大量的css。

2. absolute 绝对定位

.fixHeight1 {
border: 1px solid #F00;
position: relative;
height: 200px;
text-align: center;
overflow: hidden;
}
.fixHeight1 .bottomShow{
position: absolute;
left: 0px;
bottom: 10px;
width: 100%;
}

<div class="fixHeight1">
<p class="bottomShow">bottom</p>
</div>

这个方法不需要修改子元素的高度，不足之处在于改变元素的文档结构

3. padding-top

.fixHeight2 {
height: 30px;
padding-top:170px;
border: 1px solid #F00;
}
.fixHeight2 .bottomShow{
height: 30px;
line-height: 30px;
}

<div class="fixHeight2">
<p class="bottomShow">padding-top</p>
</div>

这个方法需要修改东西比margin-top还要多

4. table-cell

.fixHeight3 {
display: table-cell;
margin-top: 5px;
height: 200px;
width: 100%;
vertical-align: bottom;
border: 1px solid #F00;
}

<div class="fixHeight3">
<p class="bottomShow">底部显示</p>
</div>

这个方法的好处是不用再设置子元素，坏处是不兼容IE6、IE7。