Height of a div

Question

Height of a div

Navigation

#1 by (2 votes)

1

I have two div , with background of two different colors, that occupy the whole page and I want them to reach the bottom of the whole, I mean 100%, until I get it there. But when the content occupies more than 100% and there is scroll the div no longer occupies the entire screen, only takes 100% initial.

<body>
  <div id="menu">
    <div>
    </div>
  </div>

  <div id="contenido">
  </div>
</body>


html,body{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0; 
  height:100%;
  font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
}
#menu {
  width: 20%;
  background-color:#0174DF; 
  float:left;
  height: 100%;
}
#contenido {
  background-color: #58ACFA;
  width: 80%;
  float:left;
  height: 100%;
  font-size: 18px;
}

html css

asked by Borja Calvo 17.11.2016 в 21:45

source

1 answer

Problem compressing files with tar Error loading Bootstrap Toggle Button in Table

score 2 · Accepted Answer

Add overflow: auto; in your <div> . Basically this property css allows you to indicate what will happen with the content within a <div> with dimensions already defined. You have 4 different values for this attribute.

visible: Shows the content even if it does not fit within the defined dimensions.
hidden: Shows only the content that falls in the defined dimensions, the rest is lost.
scroll: Show scroll in the independent boxes if the content remains inside or exits.
auto: Respect the dimensions already defined but show the content by adding the scroll if necessary.

Without overflow

html,body{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0; 
  height:100%;
  font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
}
#menu {
  width: 20%;
  background-color:#0174DF; 
  float:left;
  height: 100%;
}
#contenido {
  background-color: #58ACFA;
  width: 80%;
  float:left;
  height: 100%;
  font-size: 18px;
}

<!doctype html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>

	<body>
  <div id="menu">
    <div>
    </div>
  </div>

  <div id="contenido">
    <p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p>
  </div>
</body>
    
</html>

With overflow

html,body{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0; 
  height:100%;
  font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
}
#menu {
  width: 20%;
  background-color:#0174DF; 
  float:left;
  height: 100%;
  overflow: auto;
}
#contenido {
  background-color: #58ACFA;
  width: 80%;
  float:left;
  height: 100%;
  font-size: 18px;
  overflow: auto;
}

<!doctype html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>

	<body>
  <div id="menu">
    <div>
    </div>
  </div>

  <div id="contenido">
    <p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p><p>asdsadsadsadsadsadsad</p>
  </div>
</body>
    
</html>