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
Detailed explanation of the solution to font blur when using transform in CSS3
This question is very strange, so I will go strai...
Linux debugging tools that developers and operators must look at [Recommended]
System performance expert Brendan D. Gregg update...
A complete record of the process of building mobile applications using Vue Native
Table of contents Preface Features of Vue Native ...
Basic tutorial on using explain statement in MySQL
Table of contents 1. Overview 1. Explain statemen...
MYSQL implements the continuous sign-in function and starts from the beginning after one day of sign-in (sql statement)
1. Create a test table CREATE TABLE `testsign` ( ...
HTML table tag tutorial (19): row tag
The attributes of the <TR> tag are used to ...
Solution to the problem that Tomcat reports 404 when accessing localhost normally
Today, when I was configuring Tomcat to access th...
Tutorial on migrating mysql from phpstudy to Linux
Project Purpose Migrate the data in MySQL 5.5.53 ...
Briefly describe the use and description of MySQL primary key and foreign key
Table of contents 1. Foreign key constraints What...
JavaScript Closures Explained
Table of contents 1. What is a closure? 2. The ro...
JavaScript generates random graphics by clicking
This article shares the specific code of javascri...
Detailed explanation of JavaScript's Set data structure
Table of contents 1. What is Set 2. Set Construct...
Priority analysis of and or queries in MySQL
This may be an issue that is easily overlooked. F...
Restart the Docker service to apply the automatic start and stop command (recommended)
Let's take a look at the command to restart t...
CSS3 uses the transition property to achieve transition effects
Detailed description of properties The purpose of...