Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve bottom alignment in CSS, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

Effect description:

1. The red area data needs to be reversed (that is, from the bottom, the numbers are 1, 2, 3, 4, 5) and displayed at the bottom.

2. When there is too much data, the scroll bar needs to be displayed, and the scroll bar needs to be pulled to the bottom * *

3. Data is pushed from websocket, with an interval of tens of milliseconds.

4. Ie10 and above browsers are required.

Using flex layout to implement

* {

Margin:0

Padding:0

Box-sizing:border-box

}

.container {

Position:relative

Width:300px

Height:500px

Margin:10pxauto

Border:1pxsolid#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

}

I am the first li element

I am the second li element

I am the third li element

I am the fourth li element

I am the fifth li element

I am the first li element

I am the second li element

I am the third li element

I am the fourth li element

I am the fifth li element

Using flex layout is currently the best solution, the sub-element layout is still arranged in the order of 1, 2, 3, 4, 5, the browser will automatically reverse when rendering, and the scroll bar will also be reversed, that is, automatically positioned to the bottom. But IE10 doesn't support it yet, so I can't use it in this project I'm working on, so I have to find another way.

Using padding-top to implement

* {

Margin:0

Padding:0

Box-sizing:border-box

}

.container {

Position:relative

Width:300px

Height:500px

Margin:10pxauto

Border:1pxsolid#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

}

I am the first li element

I am the second li element

I am the third li element

I am the fourth li element

I am the fifth li element

I am the first li element

I am the second li element

I am the third li element

I am the fourth li element

I am the fifth li element

Using padding-top is the easiest way to think of an implementation, but it cannot be implemented in pure css, and it must be calculated using js. I was implemented by padding-top+js computing at the beginning of the project, and it just doesn't feel good to implement this way. Every time websocket pushes a piece of data, it has to be calculated. So is there a better way? The answer is yes, there are always unexpected surprises in the css world, and the key is to have strong internal skills.

Using table-cell to implement

* {

Margin:0

Padding:0

Box-sizing:border-box

}

.container {

Position:relative

Width:300px

Height:500px

Margin:10pxauto

Border:1pxsolid#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

}

I am the first li element

I am the second li element

I am the third li element

I am the fourth li element

I am the fifth li element

I am the first li element

I am the second li element

I am the third li element

I am the fourth li element

I am the fifth li element

Using table-cell for bottom alignment is currently the final solution, and it is also compatible with ie8. The problem of bottom alignment has been solved. The problem of "scroll bar needs to be pulled to the bottom" cannot be realized by using table-cell. There is no way but to use js to control it. I don't know if there is any other way.

Thank you for reading this article carefully. I hope the article "how to achieve bottom alignment in CSS" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.