1

Tengo un menú que esta situado arriba y un footer abajo situado con bottom:0.

Ahora he añadido un div y quiero que me ocupe todo el espacio entre el menu y el footer.He probado con height: 0 auto y no me funciona.¿Alguna sugerencia? Gracias

 *{
	 padding:0;
	 margin:0;
	 border:none;
  }
  /*MENU*/
  .navbar{
		background-color:#62ADD6;
		font-size:15px;
		margin-bottom:0;
		border: 0; 
	}
	.navbar li a, .navbar ,.navbar-brand {
      color:#F9F2EF !important;
	  font-weight:bold;
	  
    }
	.navbar li a, .navbar .navbar-brand{
      line-height:50px;
	  
    }
	#myNavbar li:hover{
		background-color:white;
	}
	.navbar-nav li:hover a{
		color:#2371D0 !important;
	}
	ul li a:active{
		background-color:black;
	}
  /*PIE*/
  #pie{
	background-color:#2f43c1;
	padding-top:15px;
	padding-bottom:15px;
	bottom: 0;
    position: absolute;
	width:100%;
	display:bloc
  }
  .row{
	  font-size:20px;
	  color:white;
	  margin-bottom:15px;
	  font-family: Segoe UI Light;
	 

  }	
  .icon{
	  padding-right:8px;
  }
  a .icon{
	color:white;
  }
  
<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Theme Made By www.w3schools.com - No Copyright -->
  <title>Bootstrap Theme Company Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="./css/css.css" type="text/css">
  <link rel="stylesheet" href="./iconos/style.css" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  *{
	 padding:0;
	 margin:0;
	 border:none;
  }
  #section{
  display:block;
  font-size:100px;
  margin-top:80px;
  margin-bottom:0px;
  height:0 auto;
  }
	
	
  </style>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#myPage"><img src="./img/logo01.png" class="img-responsive" style="width:100px;height:35px"></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#about">INICIO</a></li>
		<li><a href="#about">CONTACTO</a></li>
      </ul>
	  <ul class="nav navbar-nav navbar-right">
        <li><a href="#about"><span class="glyphicon glyphicon-user" style="padding-right:5px"></span>Iniciar sesión</a></li>
		<li><a href="#about"><span class="glyphicon glyphicon-pencil" style="padding-right:5px"></span>Registrarse</a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="section">
efdsfsdfsdsfsdfds
</div>
<footer id="pie">
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-1 col-md-1 col-md-offset-4 col-xs-offset-4"><span class="icon-facebook2 icon"></span></div>
			<div class="col-xs-1 col-md-1"><span class="icon-instagram icon"></span></div>
			<div class="col-xs-1 col-md-1"><span class="icon-twitter icon"></span></div>
			<div class="col-xs-1 col-md-2"><a href="contacto.php"><span class="icon-mail2 icon"></a></span></div>
		</div>
		<div class="row">
			<div class="col-sm-4 col-md-4 col-md-offset-4">Página web registrada por BorjaSanchez</div>
		
		</div>
	</div>
  </footer>
  
</body>
</html>

3
  • 1
    inserta tu codigo porfavor el 26 mar. 2017 a las 15:29
  • Deberías de agregar el código que tienes actualmente. Si no, tu pregunta ahora mismo es "muy amplia". el 26 mar. 2017 a las 15:32
  • Si usas la opción Cntrl + M puedes insertar tu código directamente ejecutable en tu pregunta. el 26 mar. 2017 a las 15:44

1 respuesta 1

1

Voy a intentar darte una respuesta con algunas recomendaciones que puedes adoptar en tu código.

Si no he entendido mal quieres fijar una cabecera y un pie a tu página, por lo que puedes poner ambos divs con position: fixed para que siempre estén fijos en la pantalla. Posteriormente con la propiedad top y bottom puedes posicionarlos donde convenga (en este caso lo más arriba y lo más abajo de la pantalla respectivamente).

Posteriormente, para que el div que está entre medio ocupe el espacio disponible puedes utilizar la función calc. De esta manera al 100% de la altura de la página le puedes restar la altura que ocupan la cabecera y el pie juntos (en este caso 100px ya que cada uno ocupa 50px por separado).

Ahora ya tendrás el div intermedio con la altura del espacio que queda libre, sin embargo, este estará posicionado por debajo de la cabecera.

¿Esto a que se debe?

A que cuando posicionas un div con position: fixed este sale del workflow (flujo de trabajo) de la página, es decir, se considera como un elemento independiente de esta y no tiene en consideración el posicionamiento normal del resto de elementos.

Por lo tanto, lo que puedes hacer es posicionar el div intermedio con position: relative y subsanar el problema de que se posicione debajo de la cabecera asignándole la propiedad top: 50px para que no se solapen la cabecera y el div intermedio.

De esta manera, ya tendrás tu div intermedio con la altura del espacio libre que queda poniendo una cabecera y un pie.

Ejemplo:

html, body{
  height: 100%;
  width: 100%;
  margin: 0;
}

#cabecera{
   position: fixed;
   top: 0;
   height: 50px;
   width: 100%;
   background-color: red;
}

#medio{
   position: relative;
   top: 50px;
   height: calc(100% - 100px);
   width: 100%;
   background-color: green;
}

#footer{
   position: fixed;
   bottom: 0;
   height: 50px;
   width: 100%;
   background-color: red;
}
<div id="cabecera"></div>
<div id="medio"></div>
<div id="footer"></div>

4
  • he hecho como lo has dicho pero el height:calc no me lo coje. el 26 mar. 2017 a las 17:08
  • @BorjaSanchez ¿Que navegador estas usando? el 26 mar. 2017 a las 17:09
  • vale ya lo solucioné me faltaba el height del body.Pero ahora tengo otro problema me sale el nav luego el section y tengo un footer pero debajo del footer me sale un espacio en blanco.Sabrías el motivo? el 26 mar. 2017 a las 17:24
  • 1
    @BorjaSanchez Mira en mi ejemplo he puesto un margin: 0 a las etiquetas html y body. Esto se debe a que por defecto tienen un margen. Si se lo quitas ya no tendrás ese espacio en blanco debajo del footer. el 26 mar. 2017 a las 17:25

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.