How to calculate the body in Symfony 5 with inheritable templates I have a 76 px high navbar and a 157 px high footer because I want to make a body that occupies the rest of the screen but is responsive at the same time, that is, if the resolution of your screen is larger than the body occupies more while maintaining the proportions of the navbar and footer
this is my base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% if form is defined and form %}
{% form_theme form 'bootstrap_5_layout.html.twig' %}
{% endif %}
{% block stylesheets %}
<link href="/css/base.css" rel="stylesheet" type="text/css">
<link href="/css/main.css" rel="stylesheet" type="text/css">
<link href="/css/family.css" rel="stylesheet" type="text/css">
{% endblock %}
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body id="contenedor">
{% block menu %}
<nav class="navbar navbar-dark navbar-expand">
<div class="container-fluid">
<img id="icon" src="/svg/logoPlanesSinFondo.svg">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
<a class="nav-link" href="{{ path('app_logout') }}">
Cerrar sesión
</a>
{% else %}
<a class="nav-link" href="{{ path('app_login') }}">Iniciar sesión</a>
<a class="nav-link" href="{{ path('app_register') }}">Registrar</a>
{% endif %}
</div>
</div>
</div>
</nav>
{% endblock %}
{% block body %}
{% endblock %}
{% block footer %}
<footer class="text-center text-white">
<!-- Grid container -->
<div id="logosContainer" class="container pb-0">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a class="btn text-white btn-floating m-1" style="background-color: #3b5998;" href="https://www.facebook.com/IesJosePlanes/" role="button">
<i class="bi bi-facebook"></i>
</a>
<!-- Twitter -->
<a class="btn text-white btn-floating m-1" style="background-color: #55acee;" href="https://twitter.com/iesjoseplanes" role="button">
<i class="bi bi-twitter"></i>
</a>
<!-- Google -->
<a class="btn text-white btn-floating m-1" style="background-color: #dd4b39;" href="#!" role="button">
<i class="bi bi-google"></i>
</a>
<!-- Instagram -->
<a class="btn text-white btn-floating m-1" style="background-color: #ac2bac;" href="https://www.instagram.com/infoplaness/" role="button">
<i class="bi bi-instagram"></i>
</a>
</section>
<!-- Section: Social media -->
</div>
<!-- Grid container -->
</footer>
{% endblock %}
</body>
</html>
This is my base.css
/* BODY */
#contenedor{
height: 100%;
width: 100%;
}
/* NAVBAR */
.navbar{
width: 100%;
left: 0px;
height: 10.29%;
background-color: #37a8ec;
}
#icon{
width: 40px;
height: 60px;
/* width:40px;height: 60px; */
}
/* RESERVAS */
.disabled{
cursor: not-allowed;
pointer-events: none;
}
/* FOOTER */
footer{
position: absolute;
bottom: 0;
width: 100%;
height: 157px;
background-color: #666666;
}
#logosContainer{
height: 157px;
}
and I want the body to be responsive according to the screen resolution, be it 1920x1080 or another and this is the template that inherits from the base.css which is called index.html.twig with main.css
{% extends 'base.html.twig' %}
{% block title %}Hello MainController!{% endblock %}
{% block body %}
<div id="cardMainContainer">
<div id="cardmain1" class="card" style="width: 18rem;">
<a href="{{path('familia')}}">
<img src="/img/reloj.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<p class="card-text">Familia</p>
</div>
</div>
<div id="cardmain2" class="card" style="width: 18rem;">
<a href="{{path('plantilla')}}">
<img src="/img/calendario.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<p class="card-text">Plantilla</p>
</div>
</div>
</div>
{% endblock %}
and this is the code of main.css
/* BODY MENÚ PRINCIPAL */
#cardMainContainer{
display: flex;
}
pls help :(
How to calculate the body in Symfony 5 with inheritable templates I have a 76 px high navbar and a 157 px high footer because I want to make a body that occupies the rest of the screen but is responsive at the same time, that is, if the resolution of your screen is larger than the body occupies more while maintaining the proportions of the navbar and footer