CSS多种方式实现底部对齐

最新推荐文章于 2024-08-19 06:15:15 发布

weixin_33709364

最新推荐文章于 2024-08-19 06:15:15 发布

阅读量8.8k

点赞数

文章标签：网络

原文链接：https://segmentfault.com/a/1190000016438391

版权

本文探讨了如何使用CSS实现底部对齐效果，包括通过flex布局、padding-top和table-cell方法。尽管flex布局在现代浏览器中表现优秀，但不支持IE10。padding-top方法需要结合js计算，而table-cell方法则能兼容到ie8，但滚动条到最底部的问题仍需js解决。

摘要由CSDN通过智能技术生成

CSS实现底部对齐效果

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

效果说明：

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

使用flex布局实现

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{
        position: relative;
        width: 300px;
        height: 500px;
        margin: 10px auto;
        border: 1px solid #f60;
        color: #fff;
    }
    .top,
    .bottom{
        height: 50%;
        padding: 20px;
    }