entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Altura de section

var ventana = $(window).height();           
            var secc = ventana -380;
            $(".section").height(secc);

Tengo una página con la estructura clásica: header, nav, main, section y footer, en section cargo páginas dinamicamente, cada una con un height diferente, la idea es ir cargando un fondo especifico en sectión según la página, quedando el header y el nav fijo arriba y el footer fijo abajo y en el espacio intermedio (section) cargar la página con su fondo correspondiente, con el código de arriba funciona, obtiene el height del navegador le resto 380 que es lo que mide la suma del header, nav y footer y se los resto, pero claro cuando tiro para abajo con la barra de desplazamiento vertical, no hay fondo, osea no pilla el total del contenido de la página si no lo que se en primera instancia. A ver si me podéis ayudar con esto.

Otro problema que tengo es que me gustaría fijar el footer abajo del todo, porque cuando la página cargada en el section tiene poco contenido el footer se queda justo debajo quedando un espacio en blanco antiestetico debajo del footer.

0voto

Peter comentado

¿Y como es tu HTLM?

Para el otro problema, por favor abre otra pregunta.

Saludos.

-3votos

bichomen comentado

El problema del footer ya lo solucione --->> enter link description here

1voto

bl4z3r comentado

Estaría bueno que expliques acá como solucionaste el problema y no que pongas un enlace hacia otro sitio.

-1voto

bichomen comentado

Hice exactamente lo que pone hay cree un div que abarca desde el header al section, dejando aislado el footer, luego aplique los css tal como indica el articulo, sin cambiar nada y funciona, el problema del fondo, es más complicado. Esta involucrado contenido dinámico, luego pondré el código.

1voto

bichomen comentado

Aquí va el script en el index

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function()
    {       
        if ( !Modernizr.adownload ) 
        {
            var $link = $('a');
            $link.each(function() 
            {
                var $download = $(this).attr('download');

                if (typeof $download !== typeof undefined && $download !== false) 
                {
                var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');
                $el.insertAfter($(this));
                }
            });
        }

        $(document).ready(function() 
        {
            /*var ventana = $(window).height();
            var secc = ventana -380;
            $("section").height(secc);
            $("section").height("100p%");*/

                        var ventana = $(window).height();           
                        var secc = ventana -380;
                        $(".section").height(secc);

            $("body").on("click", "a", function(event) 
            {
                event.preventDefault(); //Se cancela la redirección

                var classenlace = "." + $(this,"a").attr("class");  
                var seccion = $(this,"a").attr("id");   

                $.ajax(
                {
                    url: $(this,"a").prop("href"),

                }
                ).done(function(data)
                {
                    var nombre = $(classenlace).data('nombre');
                    var me = $(classenlace).data('value');  
                    me = "#" +nombre + me;

                    $(".section").html(data);

                    if (seccion == "cont") 
                    {
                        $("section").css(
                        {
                                "background": "none",
                                "background-color": "#FFFFFF",
                        });                     
                        /*$(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });*/
                    }                   
                    if (seccion == "men") 
                    {
                        $("section").css(
                        {
                                "background": "none",
                                "background-color": "#FFFFFF",
                        });                     
                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });
                    }   
                    if (seccion == "sap") 
                    {
                        $("section").css(
                        {
                                "background": "none",
                                "background-color": "#FFFFFF",
                        });                     
                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });
                    }
                    if (seccion == "lib") 
                    {
                        $("section").css(
                        {
                                "background": "none",
                                "background-color": "#FFFFFF",
                        });                     
                        /*$(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });*/
                    }                                       

                    if (seccion == "ams") 
                    {
                        $("section").css(
                        {
                                "background": "none",
                                "background-color": "#010080",
                        });                     
                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });
                    }                   
                    if (seccion == "pel") 
                    {
                        $("section").css(
                        {
                            "background-image": "url('../imagenes/sepia.jpg')",
                                "background-repeat": "repeat",  
                        });

                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"                  
                        });
                    }               
                    if (seccion == "maq") 
                    {
                        $("section").css(
                        {
                            "background": "none",
                                "background-color": "#FFFFFF",
                        });

                        $(me).css(
                        {
                        /*"background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"  */                  
                        });
                    }               
                    if (seccion == "pla") 
                    {
                        $("section").css(
                        {
                            "background-image": "url('../imagenes/playmobil/fondo-play.jpg')",
                                "background-repeat": "repeat",  
                        });

                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"                  
                        });
                    }               
                    if (seccion == "cro") 
                    {
                        $("main").css(
                        {
                            "background-image": "url('../imagenes/cromos_fondo.png')",
                                "background-repeat": "repeat"
                        });

                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"                  
                        });
                    }   
                 });        
            });
        });     
    }, 
    false);

</script>

El index:

<?php include("extructura/head.php"); ?>  

<body>

    <div id="wrap">
        <header>

                <?php include("extructura/cabecera.php"); ?>        

        </header>

        <nav>

            <?php include("extructura/menu.php"); ?>

        </nav>

        <main id="main">
        <section class="section" onload="this.style.height=(window.screen.height - 380) + 'px';">

            <?php include("extructura/contenido.php"); ?>

        </section>
        </main>
    </div>

    <footer>

            <?php include("extructura/pie.php"); ?>

    </footer>

</body>
</html>

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta