2

Estoy intentando posicionar un footer en mi web dentro de un div al que le he dado la forma de rectángulo, de tal manera que no ocupa toda la página.

body {
    font-family: 'Baloo 2', cursive;
}

.page_box {
    width: 60%;
    height: 800px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.9) 0px 2px 8px 0px;
}

.title {
    padding-top: 10px;
    font-size: 50px;
    text-align: center;
}

.list {
    justify-content: center;
    display: flex;
    font-size: 30px;
}

.list ul,
li {
    display: inline;
}

.list button {
    font-size: 25px;
    background-color: aquamarine;
    border: 2px solid black;
    border-radius: 15px;
    padding: 8px 17px 8px 17px;
    /* TOP, RIGHT, BOTTOM, LEFT */
    margin-right: 50px;
    margin-left: 50px;
    transition: transform .4s;
}

.list button:hover {
    transform: scale(1.2);
}

.footer {
    position: fixed;
    bottom: 0px;
}
<!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">
    
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600&display=swap" rel="stylesheet">
    
        <title>Document</title>
    </head>
    
    <body>
        <div class="page_box">
    
            <div class="title">
                <span>TITLE TEXT</span>
            </div>
    
            <hr style="border: 2px solid black;">
    
            <div class="list">
                <ul>
                    <li><button>TEXT 1</button></li>
                    <li><button>TEXT 2</button></li>
                </ul>
            </div>
    
            <h3 class="footer">Footer</h3>
    
        </div>
    
    </body>
    
</html>

El problema es que colocando el footer dentro del div en cuestión no consigo que encaje. Alguna idea?

Así se ve ahora:

introducir la descripción de la imagen aquí

Así me gustaría tenerlo:

introducir la descripción de la imagen aquí

6
  • 1
    ¿Qué pasa si cambias el position: fixed; por un position: relative; en tu clase .footer? el 16 sep. 2021 a las 6:48
  • Me coloca el "footer" dentro del cuadro, pero debajo del botón "TEXT 1"
    – andyio
    el 16 sep. 2021 a las 6:52
  • 2
    Yo encerraría el h3 en un div con la clase footer y le daría al div position: absolute; bottom: 0;
    – OrielC.
    el 16 sep. 2021 a las 7:11
  • @OrielC. también lo había probado pero a mi, me sigue saliendo fuera del cuadro principal.
    – andyio
    el 16 sep. 2021 a las 7:13
  • 2
    Eso es por que el contenedor page_box no tiene position: relative;
    – OrielC.
    el 16 sep. 2021 a las 7:26

2 respuestas 2

0

Podrías probar dándole 100 viewpor height, display: Flex, y flex-direction: column al body...

Luego a la clase footer un margin-top: auto;

Nota: es una forma de posicionar el footer cuando no va a abajo o se va muy abajo ya que el body aveces no ocupa todo el alto del viewport, es curioso este comportamiento pero se entiende que el body también haría las veces de contenedor

-1

Mira así

`<style>
body {
font-family: "Baloo 2", cursive;
}
.page_box {
position: relative;
width: 60%;
height: 800px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
border-radius: 15px;
box-shadow: rgba(0, 0, 0, 0.9) 0px 2px 8px 0px;
}
.title {
padding-top: 10px;
font-size: 50px;
text-align: center;
}
.list {
justify-content: center;
display: flex;
font-size: 30px;
}
.list ul,
li {
display: inline;
}
.list button {
font-size: 25px;
background-color: aquamarine;
border: 2px solid black;
border-radius: 15px;
padding: 8px 17px 8px 17px;
/* TOP, RIGHT, BOTTOM, LEFT */
margin-right: 50px;
margin-left: 50px;
transition: transform 0.4s;
}
.list button:hover {
transform: scale(1.2);
}
.footer {
position: absolute;
border-top: 1px solid #000;
height: 40px;
width: 100%;
bottom: 0;
}
</style>
<div class="page_box">
<div class="title">
<span>TITLE TEXT</span>
</div>
<hr style="border: 2px solid black;" />
<div class="list">
<ul>
<li><button>TEXT 1</button></li>
<li><button>TEXT 2</button></li>
</ul>
</div>
<div class="footer">
<h3>Footer</h3>
</div>
</div>
`
2
  • 6
    Una publicación que sólo es código, sin ninguna explicación del mismo, se considera de baja calidad. Te sugiero que edites tu respuesta, puedes leer Cómo responder. Saludos el 16 sep. 2021 a las 14:21
  • Efectivamente, falta la explicación que justifique el código. En resumidas cuentas, el principal fallo viene dado porque position:fixed se emplea para fijar el elemento en cuestión respecto de la ventana de navegación. Esto hace que el footer se salga del page-box, pues no toma a este como referencia. Deberías haber usado position:absolute, pues entonces el elemento en cuestión se fijaría respecto del contenedor padre que, en este caso, es el page-box. En un comentario es difícil dar más detalles, pero espero que sean suficientes. Gracias. el 16 sep. 2021 a las 14:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.