2

Estoy realizando un proyecto con bootstrap, usando html, css y php. El caso es que no entiendo por qué no se ajusta a la pantalla, os adjunto una captura: La zona roja es la parte de la pantalla que no se ajusta.

La zona roja es la parte que queda en blanco, justo debajo ya aparecería la barra de Windows. Pongo el código que tengo:

<?php
session_start();
?>

<!DOCTYPE html>
<html>

<!-- Cabecera -->

<head>  
    <?php
    include('head.php');
    ?>
    <title>Index</title>
</head>

<!-- Cuerpo -->

<body>

    <!-- Cabecera -->
    <header>
        <div class="container">
            <h1>Gestión de proyectos I.E.S. Jacarandá</h1>
        </div>
    </header>

    <!-- Filas -->
    <div class="container fluid">
        <div class="row">
            <div class="col-md-8">
                <img src="img/jacalogo.jpeg">
            </div>
            <div class="col-md-4">
                <?php
                    include("formAcceso.php");
                ?> 
            </div>
        </div>
    </div>

    <!-- Pie -->
    <?php
        include("pie.php");
    ?> 
</body>
</html>

No sé si es problema de haber dividido en bloques la web, porque está ideado así: cabecera es una fila, cuerpo es una fila de dos columnas y el pie igual. Dependiendo de la resolución de la pantalla, la parte blanca es aún mayor.

Un saludo y gracias.


Aquí dejo el pie.

    <!-- Pie -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h4 class="mb-2 mt-3">Enlaces: </h4>
                    <dl> 
                        <dt>
                            <a href="http://www.iesjacaranda.es">Instituto.</a>
                        </dt>
                        <dt>
                            <a href="http://www.iesjacaranda-brenes.org/aulavirtual/">Aula virtual.</a>
                        </dt>
                    </dl>
                </div>

                <div class="col-md-4">
                    <h4 class="mb-2 mt-3">Herramientas: </h4>
                    <dl> 
                        <dt>
                            <a href="https://getbootstrap.com">Bootstrap.</a>
                        </dt>
                    </dl>
                </div>
            </div>
        </div>
    </footer>
8
  • Es probable que sea un margin o un padding. Hay algún sitio donde se pueda ver a tiempo real la web?
    – David
    Commented el 28 may. 2019 a las 10:19
  • Bootstrap, y la mayoría de frameworks responsive para web, se ajustan a la anchura de la pantalla, no a la altura. Si quieres que se ajuste, puedes intentar programar un pequeño código javascript para que te ajuste el tamaño del bloque central o del pie de la página. Commented el 28 may. 2019 a las 10:25
  • Por lo general, en HTML la altura de los contenedores se ajusta a su contenido, a no ser que especifiques lo contrario, como dándole al elemento una altura fija. En tu caso el .container-fluid que tienes entre la cabecera y el footer se está ajustando a su contenido, por lo que si el contenido no da para que la página ocupe el 100% de la altura del dispositivo, te va a quedar ese huevo abajo. Una posible solución sería esta: es.stackoverflow.com/a/263028/41639
    – phpMyGuel
    Commented el 28 may. 2019 a las 10:28
  • Hace falta ver el código de pie.php para saber cuál es el problema exacto. Aunque me voy a mojar y sugerir que el problema es el mismo que esta otra pregunta y que lo único que haría falta es aplicar la misma solución. De ese modo el pie se pegará a la parte baja de la página (que parece es lo que quieres).
    – Alvaro Montoro
    Commented el 28 may. 2019 a las 10:29
  • 3
    Posible duplicado de Problema Espacio Bootstrap
    – DjCrazy
    Commented el 28 may. 2019 a las 12:17

1 respuesta 1

0

Lo que podrías hacer es agregar la clase "fixed-bottom" de Bootstrap 4 a tu footer

<footer class="fixed-bottom">

para que permanezca en la parte inferior de tu página.

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.