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
Solution for adding iptables firewall policy to MySQL service
If your MySQL database is installed on a centos7 ...
Sharing experience on MySQL slave maintenance
Preface: MySQL master-slave architecture should b...
Implementation of Nginx filtering access logs of static resource files
Messy log Nginx in daily use is mostly used as bo...
Solution to the problem that the page is blank when opening the page with source file in IE7
question: My blog encoding is utf-8. Sometimes whe...
Detailed explanation of the usage of MySQL memory tables and temporary tables
Usage of MySQL memory tables and temporary tables...
Detailed explanation of MySQL remote connection permission
1. Log in to MySQL database mysql -u root -p View...
Example of Vue transition to achieve like animation effect
Table of contents Results at a Glance Heart Effec...
Vue implements image dragging and sorting
This article example shares the specific code of ...
Example code for implementing beautiful clock animation effects with CSS
I'm looking for a job!!! Advance preparation:...
Mysql dynamically updates the database script example explanation
The specific upgrade script is as follows: Dynami...
A brief analysis of the problem of Mysql 8.0 version driving getTables to return all database tables
Preface This article mainly introduces the releva...
MySQL database JDBC programming (Java connects to MySQL)
Table of contents 1. Basic conditions for databas...
border-radius is a method for adding rounded borders to elements
border-radius:10px; /* All corners are rounded wi...
base target="" controls the link's target open frame
<base target=_blank> changes the target fram...
HTML form value transfer example through get method
The google.html interface is as shown in the figur...