Preface
I have encountered such a problem on the mobile terminal before. There is a list, but there may be many lists, or there may be just one, and then there is a button at the bottom of the page. The button is positioned based on the length of the list. For example, when the height of the list plus the height of the button is less than the height of the entire page, the button is fixed at the bottom; when the height of the list plus the height of the button is greater than the height of the entire page, the button is placed behind the list; as shown in the figure:
Less than page height:
Greater than page height:
Previous thoughts:
I was thinking about using js to implement it before.
Step 1: Get the height of the entire page;
Part 2: Get the total height of the list and the height of the button (calculate padding and margin values);
Part 3: Compare the total height of the list + the height of the button with the height of the page, and then give the button different styles (positioned or not)
This method is undoubtedly rubbish, and then I encountered the same need today, and suddenly I remembered that it can be achieved using display:flex. I laughed at that time. It turns out that I was a real novice when I first entered the industry!
display implementation
Just go to the code...
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style> body{margin: 0;}.wrap {display: flex;flex-flow: column nowrap;min-height: 100vh!important;}ul{flex: 1;padding: 0;margin-top: 0px;}li{height: 100px;width: 100%;background: yellowgreen;}li:nth-child(2n){background-color: bisque;}button{width: 90%;height: 60px;background: #1677ff;border: none;border-radius: 10px;margin: 0 auto 20px;color: #fff;} </style>
<body><div class="wrap"><ul><li>哈哈哈哈</li><li>哈哈哈哈</li><li>哈哈哈哈</li></ul><button>按钮</button></div>
</body>
</html>
Let’s see the effect
at last
Recently, I compiled a note on JavaScript and ES, with a total of 25 important knowledge points, each of which was explained and analyzed. It can help you quickly master JavaScript and ES related knowledge and improve work efficiency.
Friends in need can click on the card below to receive it and share it for free