0

estoy realizando una app sencilla con angular y bootstrap, realice un componente footer y lo mando a llamar en el app.html de la siguiente manera: <app-footer></app-footer> para que asi todos los componentes lo tengan ya agregado.

mi footer. html es el siguiente de ejemplo:

<footer class="footer" id="footer">
    <div class="container">
        <div class="content has-text-centered text-muted">
            <P>
                Derechos reservados. Miguel Hidalgo centro historioc 44
            </P>
        </div>

    </div>
</footer>

y el footer.css

.text-muted{
    color: black;
}

.footer{
    position: fixed;
    display: inline-block;
    bottom: 0;
    width: 100%;
    height: 10%;
    background-color: cornflowerblue;
    font-size: 12px;
    text-align: center;
}

Ahora, tengo mi componente consulta tareas, en la cual tengo dos tablas responsivas de la siguiente manera:

<nav class="navbar navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Menu Principal</a>
    </div>
</nav>
<br>
<br>
<br>
<p style="text-align: center; font-weight: bold;">
    Consulta de tareas
</p>
<br>
<div class="container">
    <div class="row d-flex justify-content-center">

        <table class="table table-striped table-responsive">
            <thead style="background-color: blueviolet;">
                <tr>
                    <th scope="col">id</th>
                    <th scope="col">tarea</th>
                    <th scope="col">descripcion</th>
                    <th scope="col">funcion</th>
                    <th scope="col">nivel</th>
                    <th scope="col">Tipo</th>
                    <th scope="col">Clasificacion</th>
                    <th scope="col">Observaciones</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>@mdo</td>
                </tr>
            </tbody>
        </table>
        <br>
        <br>
        <p style="text-align: center; font-weight: bold;">
            EJEMPLO OTRA TABLA RESPONSIVA
        </p>
        <table class="table table-striped table-responsive">
            <thead style="background-color: blueviolet;">
                <tr>
                    <th scope="col">id</th>
                    <th scope="col">tarea</th>
                    <th scope="col">descripcion</th>
                    <th scope="col">funcion</th>
                    <th scope="col">nivel</th>
                    <th scope="col">Tipo</th>
                    <th scope="col">Clasificacion</th>
                    <th scope="col">Observaciones</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>@mdo</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

y lo que pasa es que cuando agrego el componente footer, las tablas salen asi, el footer tapa el contenido de la tabla de hasta abajo y no sale el scroll como en la tabla de arriba introducir la descripción de la imagen aquí

y si quito el footer, si sale bien el contenido de la 2da tabla introducir la descripción de la imagen aquí

que estoy haciendo mal con mi footer? que le debo modificar?

1 respuesta 1

2

Hola mi solucion para tu problema fue agregarle un padding bottom al body.

Aqui el ejemplo de como se vería

body
{
    padding-bottom: 10%;
}

.text-muted{
    color: black;
}

.footer{
    position: fixed;
    display: inline-block;
    bottom: 0;
    width: 100%;
    height: 10%;
    background-color: cornflowerblue;
    font-size: 12px;
    text-align: center;
}
<body>
    <nav class="navbar navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Menu Principal</a>
    </div>
</nav>
<br>
<br>
<br>
<p style="text-align: center; font-weight: bold;">
    Consulta de tareas
</p>
<br>
<div class="container">
    <div class="row d-flex justify-content-center">

        <table class="table table-striped table-responsive">
            <thead style="background-color: blueviolet;">
                <tr>
                    <th scope="col">id</th>
                    <th scope="col">tarea</th>
                    <th scope="col">descripcion</th>
                    <th scope="col">funcion</th>
                    <th scope="col">nivel</th>
                    <th scope="col">Tipo</th>
                    <th scope="col">Clasificacion</th>
                    <th scope="col">Observaciones</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>@mdo</td>
                </tr>
            </tbody>

        </table>
        <br>
        <br>
        <p style="text-align: center; font-weight: bold;">
            EJEMPLO OTRA TABLA RESPONSIVA
        </p>
        <table class="table table-striped table-responsive">
            <thead style="background-color: blueviolet;">
                <tr>
                    <th scope="col">id</th>
                    <th scope="col">tarea</th>
                    <th scope="col">descripcion</th>
                    <th scope="col">funcion</th>
                    <th scope="col">nivel</th>
                    <th scope="col">Tipo</th>
                    <th scope="col">Clasificacion</th>
                    <th scope="col">Observaciones</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>@mdo</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

    <footer class="footer" id="footer">
        <div class="container">
            <div class="content has-text-centered text-muted">
                <P>
                    Derechos reservados. Miguel Hidalgo centro historioc 44
                </P>
            </div>

        </div>
    </footer>
</body>
</html>

1

Tu Respuesta

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

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