Example code for implementing bottom alignment in multiple ways with CSS
|
Due to the company's business requirements, the effect of the red area in the following figure needs to be achieved:
Effect description: 1. The data in the red area needs to be reversed (i.e. count from the bottom, the numbers are 1, 2, 3, 4, 5) and displayed at the bottom Implemented using flex layout
<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>
<div class="container">
<div class="top">
<ul style="padding-top: 104px;">
<li>I am the first li element</li>
<li>I am the second li element</li>
<li>I am the third li element</li>
<li>I am the 4th li element</li>
<li>I am the fifth li element</li>
</ul>
</div>
<div class="bottom">
<ul>
<li>I am the first li element</li>
<li>I am the second li element</li>
<li>I am the third li element</li>
<li>I am the 4th li element</li>
<li>I am the fifth li element</li>
</ul>
</div>
</div>Using flex layout is currently the best solution. The sub-elements are still laid out in the order of 1, 2, 3, 4, 5. The browser will automatically reverse when rendering, and the scroll bar will also reverse, that is, automatically position to the bottom. But IE10 does not support ~ yet, so it cannot be used in this project I am working on, and 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>
<div class="container">
<div class="top">
<ul style="padding-top: 104px;">
<li>I am the first li element</li>
<li>I am the second li element</li>
<li>I am the third li element</li>
<li>I am the 4th li element</li>
<li>I am the fifth li element</li>
</ul>
</div>
<div class="bottom">
<ul>
<li>I am the first li element</li>
<li>I am the second li element</li>
<li>I am the third li element</li>
<li>I am the 4th li element</li>
<li>I am the fifth li element</li>
</ul>
</div>
</div>Using padding-top is the easiest way to implement it, but it cannot be implemented with pure CSS. It must also be calculated using JS. At the beginning of my project, I used padding-top+js calculation to implement it. This method is not comfortable to implement. Every time a piece of data is pushed over by websocket, calculation 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 implement
<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>
<div class="container">
<div class="top">
<div class="top-container">
<ul>
<li>I am the first li element</li>
<li>I am the second li element</li>
<li>I am the third li element</li>
<li>I am the 4th li element</li>
<li>I am the fifth li element</li>
</ul>
</div>
</div>
<div class="bottom">
<ul>
<li>I am the first li element</li>
<li>I am the second li element</li>
<li>I am the third li element</li>
<li>I am the 4th li element</li>
<li>I am the fifth li element</li>
</ul>
</div>
</div>Using table-cell to achieve bottom alignment is currently the last 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 achieved using table-cell. I have no choice but to use js to control it. I wonder if any great god has other solutions~ CSS table and table-cell layout can achieve many special effects. For details, you can go to Zhang Xinxu's application of display: table-cell that I know of. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: HTML hyperlinks explained in detail
>>: Detailed steps for running springboot project in Linux Docker
Recommend
How to use the Linux seq command
1. Command Introduction The seq (Sequence) comman...
Multiple ways to implement two-column layout with fixed width on the left and adaptive width on the right using CSS
7 ways to implement a two-column layout with fixe...
Download and install VSCode on Linux and use programming to output the current time
Which parameter does the rpm command use to insta...
React+ts realizes secondary linkage effect
This article shares the specific code of React+ts...
mysql5.6.zip format compressed version installation graphic tutorial
Preface: MySQL is a relational database managemen...
Detailed example of jQuery's chain programming style
The implementation principle of chain programming...
CentOS7 uses rpm to install MySQL 5.7 tutorial diagram
1. Download 4 rpm packages mysql-community-client...
Summary of MySQL slow log practice
Slow log query function The main function of slow...
MySQL paging analysis principle and efficiency improvement
MySQL paging analysis principle and efficiency im...
Detailed explanation of the conflict between flex layout and position:absolute/fixed
I encountered this problem before when developing...
Detailed explanation of the download process of the mysql-connector-java.jar package
Download tutorial of mysql-connector-java.jar pac...
Docker Gitlab+Jenkins+Harbor builds a persistent platform operation
CI/CD Overview CI workflow design Git code versio...
About the pitfall record of Vue3 transition animation
Table of contents background Problem location Fur...
Summary of learning Docker commands in one article
Table of contents Introduction Mirror repository ...
Let's talk about the two functions of try catch in Javascript
The program is executed sequentially from top to ...