CSS多种方式实现底部对齐的案例

　　介绍

这篇文章主要介绍CSS多种方式实现底部对齐的案例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

因公司业务要求需要实现如下图中红色区域的效果:

CSS多种方式实现底部对齐的案例

CSS多种方式实现底部对齐的案例

效果说明:

1,红色区域数据需要倒排(即从底部开始数,数字为1,2,3,4,5),并且显示在最底部
2,当数据过多时需要显示滚动条,* *并且滚动条需要拉到最底部* *
3,数据从websocket中推送过来,推送间隔为几十毫秒
4,需要兼容ie10及以上浏览器

使用flex布局实现

& lt; style> 　　* { 　　保证金:0; 　　填充:0; 　　box-sizing: border-box; 　　} 　　.container { 　　位置:相对; 　　宽度:300 px; 　　身高:500 px; 　　保证金:10 px汽车; 　　边界:1 px固体#法郎; 　　颜色:# fff; 　　} 　　.top, 　　.bottom { 　　高度:50%; 　　填充:20 px; 　　} 　　.top { 　　background - color: # da2e22; 　　} 　　.top> ul { 　　宽度:100%; 　　高度:100%; 　　溢出:汽车; 　　} 　　.bottom { 　　溢出:汽车; 　　background - color: # 1 e1e1e; 　　} 　　& lt;/style> & lt; p类=癱ontainer"比; 　　类& lt; p=皌op"祝辞 　　& lt; ul风格=皃adding-top: 104 px;“比; 　　李& lt; li>我是第1个元素& lt;/li> 　　李& lt; li>我是第2个元素& lt;/li> 　　李& lt; li>我是第3个元素& lt;/li> 　　李& lt; li>我是第4个元素& lt;/li> 　　李& lt; li>我是第5个元素& lt;/li> 　　& lt;/ul> 　　& lt;/p> 　　类& lt; p=癰ottom"祝辞 　　& lt; ul> 　　李& lt; li>我是第1个元素& lt;/li> 　　李& lt; li>我是第2个元素& lt;/li> 　　李& lt; li>我是第3个元素& lt;/li> 　　李& lt; li>我是第4个元素& lt;/li> 　　李& lt; li>我是第5个元素& lt;/li> 　　& lt;/ul> 　　& lt;/p> 　　& lt;/p>

使用flex布局是目前最好的解决办法,子元素布局还是按照1,2,3,4,5这样的顺序进行布的局,浏览器器在渲染时会自动反转过来,并且滚动条也会反转过来,即自动定位到最底部。但的问世是目前为止还不支持~,所以在我做的这个项目中是用不了的了,只能另辟蹊径。

<强>使用padding-top实现

& lt; style> 　　* { 　　保证金:0; 　　填充:0; 　　box-sizing: border-box; 　　} 　　.container { 　　位置:相对; 　　宽度:300 px; 　　身高:500 px; 　　保证金:10 px汽车; 　　边界:1 px固体#法郎; 　　颜色:# fff; 　　} 　　.top, 　　.bottom { 　　高度:50%; 　　填充:20 px; 　　} 　　.top { 　　background - color: # da2e22; 　　} 　　.top> ul { 　　宽度:100%; 　　高度:100%; 　　溢出:汽车; 　　} 　　.bottom { 　　溢出:汽车; 　　background - color: # 1 e1e1e; 　　} 　　& lt;/style> & lt; p类=癱ontainer"比; 　　类& lt; p=皌op"祝辞 　　& lt; ul风格=皃adding-top: 104 px;“比; 　　李& lt; li>我是第1个元素& lt;/li> 　　李& lt; li>我是第2个元素& lt;/li> 　　李& lt; li>我是第3个元素& lt;/li> 　　李& lt; li>我是第4个元素& lt;/li> 　　李& lt; li>我是第5个元素& lt;/li> 　　& lt;/ul> 　　& lt;/p> 　　类& lt; p=癰ottom"祝辞 　　& lt; ul> 　　李& lt; li>我是第1个元素& lt;/li> 　　李& lt; li>我是第2个元素& lt;/li> 　　李& lt; li>我是第3个元素& lt;/li> 　　李& lt; li>我是第4个元素& lt;/li> 　　李& lt; li>我是第5个元素& lt;/li> 　　& lt;/ul> 　　& lt;/p> 　　& lt;/p>

使用padding-top是最容易想到的一种实现方式,但它无法用纯css实现,它还必须使用js进行计算才可以。我在项目中刚开始就是padding-top + js计算来实现的,这种方式实现起来就是感觉不爽,websocket每推送一条数据过来就要进行计算。那么还有没有更好的办法呢?答案是肯定有的,在css世界中总有意想不到的惊喜,关键是内功要强。

<强>使用表格单元来实现

& lt; style> 　　* { 　　保证金:0; 　　填充:0; 　　box-sizing: border-box; 　　} 　　.container { 　　位置:相对; 　　宽度:300 px; 　　身高:500 px; 　　保证金:10 px汽车; 　　边界:1 px固体#法郎; 　　颜色:# fff; 　　} 　　.top, 　　.bottom { 　　高度:50%; 　　填充:20 px; 　　溢出:汽车; 　　} 　　.top { 　　background - color: # da2e22; 　　} 　　.top-container { 　　显示:表; 　　宽度:100%; 　　高度:100%; 　　} 　　.top-container> ul { 　　显示:表格单元; 　　vertical-align:底部; 　　宽度:100%; 　　高度:100%; 　　} 　　.bottom { 　　background - color: # 1 e1e1e; 　　} 　　& lt;/style>

CSS多种方式实现底部对齐的案例