Give determined height to a div between a menu and a foot

Question

Give determined height to a div between a menu and a foot

Navigation

#1 by (1 votes)

1

I have a menu that is located above and a footer below with bottom: 0.

Now I have added a div and I want it to occupy all the space between the menu and the footer. I have tried with height: 0 auto and it does not work for me. Any suggestions? Thanks

 *{
	 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>

html css3

asked by Borja Sanchez 26.03.2017 в 17:22

source

1 answer

Bring checkeado from dynamic radio button database? The succes of Ajax is not working

score 1 · Answer 1

I will try to give you an answer with some recommendations that you can adopt in your code.

If I have not misunderstood you want to set a header and footer to your page, so you can put both divs with position: fixed so that they are always fixed on the screen. Later with the property top and bottom you can position them where appropriate (in this case the top and bottom of the screen respectively).

Subsequently, so that the div that is in between occupies the available space you can use the function calc . In this way 100% of the height of the page you can subtract the height that occupy the header and foot together (in this case 100px since each occupies 50px separately).

Now you will have the intermediate div with the height of the space that is free, however, this will be positioned below the header.

What is this?

That when you position a div with position: fixed it leaves the workflow (workflow) of the page, that is, it is considered as an independent element of it and does not take into account the normal positioning of the rest of the elements.

Therefore, what you can do is position the intermediate div with position: relative and correct the problem that it is positioned below the header by assigning the property top: 50px so that the header and the intermediate div do not overlap.

In this way, you will already have your intermediate div with the height of the free space that is left putting a header and a foot.

Example:

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>