固定高度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。