Prefacio
Me he encontrado con un problema de este tipo en el terminal móvil antes. Hay una lista, pero puede haber muchas listas, o puede haber solo una, y luego hay un botón en la parte inferior de la página. El botón se coloca según la longitud de la lista. Por ejemplo, cuando la altura de la lista más la altura del botón es menor que la altura de toda la página, el botón se fija en la parte inferior; cuando la altura de la lista más la altura del botón es mayor que la altura de toda la página, el botón se coloca detrás de la lista, como se muestra en la figura:
Menos que la altura de la página:
Mayor que la altura de la página:
Pensamientos anteriores:
Estaba pensando en usar js para implementarlo antes.
Paso 1: obtenga la altura de toda la página;
Parte 2: obtener la altura total de la lista y la altura del botón (calcular los valores de relleno y margen);
Parte 3: Compara la altura total de la lista + la altura del botón con la altura de la página, y luego dale al botón diferentes estilos (posicionados o no)
Este método es sin duda una basura, y luego me encontré con la misma necesidad hoy, y de repente recordé que se puede lograr usando display: flex. Me reí en ese momento. Resulta que era un verdadero novato cuando entré por primera vez en la industria. !
implementación de visualización
Sólo ve al código...
<!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>
Veamos el efecto
por fin
Recientemente, compilé una nota sobre JavaScript y ES, con un total de 25 puntos de conocimiento importantes, cada uno de los cuales fue explicado y analizado. Puede ayudarlo a dominar rápidamente los conocimientos relacionados con JavaScript y ES y mejorar la eficiencia del trabajo.
Los amigos necesitados pueden hacer clic en la tarjeta a continuación para recibirla y compartirla gratis.