0

El layout por ahora me funciona bien pero en la sección Descargas.php el footer es como 3 veces más alto, por que el contenido principal es poco texto.

le he añadido la clase con-des al primer contenedor con un height 600px / 70% pero no consigo bajar el footer.

<?php include "includes/header.php" ?>

    <div class="container con-des">

    <h1>Descargas</h1>
        <div class="content-descargas">
        <ul class="uldescarga">

            <li class="lidescarga"><img title="descargar" class="icondescarga" src="images/icondownload2.png"><a class="enlacedescarga" href="#">Se busca banda</a>     </li>
            <li class="lidescarga"><img title="descargar" class="icondescarga" src="images/icondownload2.png"><a class="enlacedescarga" href="#">La democracia ha muerto vol 1</a>  </li>
            <li class="lidescarga"><img title="descargar" class="icondescarga" src="images/icondownload2.png"><a class="enlacedescarga" href="#">La democracia ha muerto vol 2</a>      </li>
            <li class="lidescarga"><img title="descargar" class="icondescarga" src="images/icondownload2.png"><a class="enlacedescarga" href="#">Bokerones muertos</a>      </li>
            <li class="lidescarga"><img title="descargar" class="icondescarga" src="images/icondownload2.png"><a class="enlacedescarga" href="#">La desvirtualización de las ideas</a>      </li>   

        </ul>       
        <p>* Las descargas son gratuitas</p>
        </div><!--content-descargas -->
    </div><!--container -->         
        <div class="container">


            <div class="redessociales">
                <ul>
                    <li class="ulsociales"><a target="_blank" href="http://www.facebook.com/pages/JAM%C3%93N-DE-MONO/626328110714565?fref=ts"><img src="images/facebook.png"></a></li>
                    <li class="ulsociales"><a target="_blank" href="http://twitter.com/ferdelapola"><img src="images/twitter.png"></a></li>
                    <li class="ulsociales"><a target="_blank" href="http://www.youtube.com/user/rockcannabico?feature=watch"><img src="images/youtube.png"></a></li>
                </ul>   

            </div><!--redessociales --> 

    </div><!--container -->



<?php include "includes/footer.php" ?>

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { 

    .imglogo
    {
             margin-left: 95px;
    }

    .con-desc
    {
        height: 77%;
    }


}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { 

 }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {

.con-desc
    {
        height: 600px;
    }

.content-descargas
{
    height: 700px;
}

 }

header.php

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon-32x32.png" />
    <title>Jamón de mono</title>

</head>

<body>
<header>
<div class="container">
  <div class="row">


<div class="col-xs-12 col-sm-12 col-md-2 logodiv">
  <img class="imglogo" src="images/logo5.png" alt="">

</div> 


<div class="col-xs-12 col-sm-12 col-md-10">
<nav class="navbar navbar-default" role="navigation">
  <!-- El logotipo y el icono que despliega el menú se agrupan
       para mostrarlos mejor en los dispositivos móviles -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target=".navbar-ex1-collapse">
      <span class="sr-only">Desplegar navegación</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

  </div>

  <!-- Agrupar los enlaces de navegación, los formularios y cualquier
       otro elemento que se pueda ocultar al minimizar la barra -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="linkmenu active"><a href="index.php">Biografía</a></li>
      <li class="linkmenu"><a href="discografia.php">Discografía</a></li>
      <li class="linkmenu"><a href="#">Videos</a></li>
      <li class="linkmenu"><a href="descargas.php">Descargas</a></li>

  </div>
</nav>
</div>

</div>
</div>
</header>

footer.php

<footer>

<div class="container">

            <div class="footercontent">
                <p class="parrafofooter"> <?php echo date("Y",time()); ?> &copy; Jamón de mono  </p> 

                <p class="parrafofooter">Teléfono:  665 13 39 56 [email protected]</p>

                <p class="parrafofooter"><a class="cookie" href="#">Política de cookies</a></p>

            </div>





</div> <!-- .container -->          
</footer>
<div id="barraaceptacion">
                <div class="inner">
                    <p>Este sitio web usa Cookies de terceros con el fin de que tenga una mejor experiencia de usuario. Al seguir navegando asumimos que está de acuerdo con ellas.<a href="javascript:void(0);" class="ok" onclick="ocultar();">OK</a> 
                    <a class="enlacefooter" href="#"  class="info">Más información</a>

                </div>
            </div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"> </script>
<script>

var clic = 1;

function ocultar()
{ 
   if(clic==1)
   {
       document.getElementById("barraaceptacion").style.display = "none";
      // clic = clic + 1;
   }
   else
   {
      // document.getElementById("caja").style.height = "0px";      
        //clic = 1;
   }   
}
</script>
</body>
</html>
1
  • Has intentado con position absolute? Sin conocer el contenido de header o footer es muy difícil saber que consejo darte. También podrías crear un jsbin o codepen para saber como es la página. Commented el 12 oct. 2016 a las 22:23

1 respuesta 1

1

Intenta con esto:

.con-des {
    height: 100vh;
}

vh(viewport height) es una unidad de medida en css, que es con respecto al height del dispositivo

13
  • No va el height: 100vh; sigue igual Commented el 12 oct. 2016 a las 22:32
  • @Rafahernandez intenta poner ese estilo a los tags padres(body, u otro contenedor de todo) Commented el 12 oct. 2016 a las 22:35
  • le he puesto eso al body y no cambia nada Commented el 12 oct. 2016 a las 22:42
  • @Rafahernandez habría que inspeccionar el código, podrias subirlo a un dominio? Commented el 12 oct. 2016 a las 22:53
  • he puesto el height: 23vh; modificando la clase .container de bootstrap y ya me coge el height. Commented el 12 oct. 2016 a las 22:54

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.