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?
position: fixed;
por unposition: relative;
en tu clase.footer
?position: absolute; bottom: 0;
position: relative;