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
Comparison of the advantages of vue3 and vue2
Table of contents Advantage 1: Optimization of di...
Vue2.x configures routing navigation guards to implement user login and exit
Table of contents Preface 1. Configure routing na...
Practical example of nested routes in vue.js Router
Table of contents Preface Setting up with Vue CLI...
JavaScript imitates the complete page implementation process of Xiaomi Mall official website
Table of contents 1. Home Page Production 1. Prod...
How to set up virtual directories and configure virtual paths in Tomcat 7.0
Tomcat7.0 sets virtual directory (1) Currently, o...
mysql implements adding time automatically adding and updating time automatically updating operation
Time fields are often used in database usage. Com...
How to allow remote access to open ports in Linux
1. Modify the firewall configuration file # vi /e...
Summary of JS tips for creating or filling arrays of arbitrary length
Table of contents Preface Direct filling method f...
MySQL 5.7 installation and configuration tutorial under CentOS7 (YUM)
Installation environment: CentOS7 64-bit, MySQL5....
Vue project realizes paging effect
The paging effect is implemented in the vue proje...
Detailed explanation of the use of MySQL Online DDL
Table of contents text LOCK parameter ALGORITHM p...
A brief analysis of the count tracking of a request in nginx
First, let me explain the application method. The...
MySQL 5.7.16 free installation version graphic tutorial under Linux
This article shares the MySQL 5.7.16 free install...
How to let https website send referrer https and http jump referrer
This article describes a proposal for a metadata ...
A brief analysis of how to use border and display attributes in CSS
Introduction to border properties border property...