Sample code for multiple ways to achieve bottom alignment with CSS

This article mainly introduces the relevant information about the sample code of bottom alignment using CSS in various ways. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Due to the company’s business requirements, it is necessary to achieve the effect of the red area in the following picture:

Effect description:

1. The data in the red area needs to be inverted (that is, counting from the bottom, the numbers are 1, 2, 3, 4, 5) and displayed at the bottom
2. When there is too much data, a scroll bar needs to be displayed. **And the scroll bar needs to be pulled to the bottom**
3. Data is pushed from websocket, and the push interval is tens of milliseconds
4. It needs to be compatible with IE10 and above browsers

Use flex Layout implementation

<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;
    }
    .top{
        background-color: #da2e22;
    }
    .top>ul{
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .bottom{
        overflow: auto;
        background-color: #1e1e1e;
    }
</style>

<p class="container">
    <p class="top">
        <ul style="padding-top: 104px;">
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </p>
    <p class="bottom">
        <ul>
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </p>
</p>

Using flex layout is currently the best solution. The sub-element layout is still laid out in the order of 1, 2, 3, 4, 5. The browser will automatically reverse it when rendering. Come over, and the scroll bar will be reversed, that is, it will be automatically positioned at the bottom. But IE10 does not support it so far~, so it cannot be used in this project I am working on, so I have to find another way.

Use padding-top to achieve

<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;
    }
    .top{
        background-color: #da2e22;
    }
    .top>ul{
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .bottom{
        overflow: auto;
        background-color: #1e1e1e;
    }
</style>

<p class="container">
    <p class="top">
        <ul style="padding-top: 104px;">
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </p>
    <p class="bottom">
        <ul>
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </p>
</p>

Using padding-top is the easiest way to think of it, but it cannot be implemented with pure css, it must also be used js can be used for calculations. At the beginning of my project, I implemented padding-top js calculations. This way of implementation just felt uncomfortable. Every time a piece of data is pushed to the websocket, calculations must be performed. So is there a better way? The answer is definitely yes. There are always unexpected surprises in the CSS world. The key is to have strong internal skills.

Use table-cell to achieve

<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;
        overflow: auto;
    }
    .top{
        background-color: #da2e22;
    }
    .top-container{
        display: table;
        width: 100%;
        height: 100%;
    }
    .top-container>ul{
        display: table-cell;
        vertical-align: bottom;
        width: 100%;
        height: 100%;
    }
    .bottom{
        background-color: #1e1e1e;
    }
</style>

<p class="container">
    <p class="top">
        <p class="top-container">
            <ul>
                <li>我是第1个li元素</li>
                <li>我是第2个li元素</li>
                <li>我是第3个li元素</li>
                <li>我是第4个li元素</li>
                <li>我是第5个li元素</li>
            </ul>
        </p>
    </p>
    <p class="bottom">
        <ul>
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </p>
</p>

Using table-cell to achieve bottom alignment is currently the final solution, and it is also compatible with ie8. The bottom alignment problem has been solved. The problem of "the scroll bar needs to be pulled to the bottom" cannot be realized using table-cell. I have no choice but to use js to control it. I wonder if any master has other methods~

CSS’s table and table-cell layout can achieve many special effects. For details, you can read Zhang Xinxu’s Several Displays I Know: Table-cell Applications

Summary: That’s it for this article The entire content of the article is hoped to be helpful to everyone's study. For more related tutorials, please visit CSS Video Tutorial!

Related recommendations:

php public welfare training video tutorial

CSS Online Manual

##div/css graphic tutorial

The above is the detailed content of Sample code for multiple ways to achieve bottom alignment with CSS. For more information, please follow other related articles on the PHP Chinese website!