Problem css height 100%

* {
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: #333333;
  color: #666666;
  font-size: 12px;
  font-family: verdana;
}

#contenido {
  margin: 0 auto;
  padding: 0;
  width: 750px;
  
  display: flex;  
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
}

#contenido > * {
  flex: 1 100%;
}

#cabecera {
  height: 60px;
  padding-top: 15px;
  color: #000000;
  background-image: url("logocabecera.jpg");
}
#secundario {
  flex: 0 0 200px;
  
  padding: 5px;
  background: #ffff55;
  border: 1px solid #555555;
}

#principal {
  flex: 1 0;
  
  padding: 5px;
  background: #ffffbb;
  border: 1px solid #555555;
}

#primeracolumna ul {
  list-style: none;
  margin-left: 1em;
  width: 130px;
  border: 1px solid #7c7c7c;
}

#secundario h3 {
  color: #b4045f;
}

#primeracolumna ul li a {
  padding: .2em 0 .2em 1.5em;
  display: block;
  text-decoration: none;
  color: #333000;
  background: #f4f4f4;
}

#primeracolumna ul li a:hover,
ul li a:active {
  background: #58fa58;
}

#principal img {
  padding: 10px;
  float: right;
  width: 50%;
}

#principal h3 {
  background: #ffffff;
  color: #b4045f;
}

.menuvertical2 {
  width: 170px;
  list-style: none;
  margin-left: 1em;
  border: 1px solid #7c7c7c;
}

.menuvertical2 li a {
  padding: .2em 0 .2em 1.5em;
  display: block;
  text-decoration: none;
  color: #333000;
  background: #f4f4f4;
}

.menuvertical2 li a:hover,
li a:active {
  background: #58fa58;
}

#pie {
  background: #338000;
  clear: both;
  height: 30px;
  color: #ffffff;
  padding: 10px 0 0 10px;
}

.enlaces {
  float: left;
}

.enlaces a {
  text-decoration: none;
  color: #ffffff;
}

.enlaces a:hover {
  background: #336699;
  color: #ffffff;
}

.creador {
  float: right;
  margin-right: 13px;
}

<div id="contenido">
  <div id="cabecera">
    <h1>LOGOTIPO</h1>
  </div>
  <div id="secundario">
    Columna a la izquierda.Columna a la izquierda.Columna a la izquierda.Columna a la izquierda.<br/>
    <h3>Mis buscadores</h3>
    <div id="primeracolumna">
      <ul class="menuvertical">
        <li><a href="http://www.google.com/">Google</a></li>
        <li><a href="http://www.yahoo.com/">Yahoo</a></li>
        <li><a href="http://www.msn.com/">Msn</a></li>
        <li><a href="http://www.altavista.com/">Altavista</a></li>
      </ul>
    </div><br/>
    <h3>Otras informaciones</h3>
    Otras informaciones.Otras informaciones.Otras informaciones.Otras informaciones.Otras informaciones.Otras informaciones.
    <br/><br/>
    <h3>Los parques nacionales</h3><br/>
    <ul class="menuvertical2">
      <li><a href="http://reddeparquesnacionales.mma.es/parques/index.htm">Red de PP.NN.</a></li>
      <li><a href="http://www.picoseuropa.net/">PN Picos de Europa</a></li>
      <li><a href="http://www.ordesapirineos.com/">PN de Ordesa y Monte perdido</a></li>
      <li><a href="http://www.monfrague.com/">PN de Monfrag&uuml;e</a></li>
      <li><a href="http://www.lleidatur.com/esp/parcnacional.html">PN de Aig&uuml;estortes</a></li>
    </ul>
  </div>
  <div id="principal">
    <h3>Informacion principal</h3>
    Contenido principal.Contenido principal.Contenido principal.Contenido principal.
    <br/><br/>
    <h3>Sierra de Gredos</h3>
    <br/>
    <p><img src="RecursosUnidad2\Imagenes y Textos Actividades\gredos.jpg" title="Sierra de gredos" /> La sierra de Gredos es una sierra perteneciente al sistema Central, en la península ibérica, situada entre las provincias españolas de Salamanca, Cáceres,
      Ávila, Madrid y Toledo. Su máxima altitud se da en la provincia de Ávila en la Plaza del Moro Almanzor a 2592 msnm. Gredos es una de las sierras más extensas del sistema Central y en torno a sus grandes moles graníticas basculan cuatro comunidades
      autónomas: Castilla y León, Castilla-La Mancha, Extremadura y Madrid. Se extiende de este a oeste desde San Martín de Valdeiglesias a Hervás y de norte a sur del valle del Tormes a Rosarito. Parte de la sierra está declarada parque regional.</p>
    <br/><br/>
    <h3>Pirineos</h3>
    <br/>
    <p><img src="RecursosUnidad2\Imagenes y Textos Actividades\pirineos.jpg" /> Los Pirineos, o el Pirineo como prefieren denominar sus habitantes al referirse a una parte o región de éstos (español: Pirineos; francés: Pyrénées; catalán: Pirineus; occitano:
      Pirenèus; aragonés: Pireneus/Perinés; euskera: Pirinioak o Auñamendiak), son una cordillera montañosa situada al norte de la península ibérica, entre España, Andorra y Francia. Se extiende a lo largo de 430 km desde el mar Mediterráneo (cabo de
      Creus) al este, hasta su unión con la cordillera Cantábrica al oeste, donde se ha establecido la falla de Pamplona como su límite convencional geológico, no existiendo interrupción geográfica entre ambas formaciones.1​ En su parte central tiene
      una anchura de unos 150 km. </p>
    <br/><br/>
    <h3>Picos de Europa</h3>
    <br/>
    <p><img src="RecursosUnidad2\Imagenes y Textos Actividades\picoseuropa.jpg" /> Los Picos de Europa son un macizo montañoso localizado en el norte de España que pertenece a la parte central de la cordillera Cantábrica. Aunque no muy extenso, su cercanía
      al mar hace que sea pródigo en accidentes geográficos de gran interés. En la actualidad el Parque nacional de los Picos de Europa constituye el segundo parque nacional más visitado de España, después del Parque nacional del Teide (Tenerife).</p>
  </div>
  <div id="pie">
    <span class="enlaces">
    					<a href="http://www.google.com/">Google</a> |
    					<a href="http://www.yahoo.com/">Yahoo</a> | 
    					<a href="http://www.msn.com/">Msn</a> |
    					<a href="http://www.altavista.com/">Altavista</a> |
    					<a href="http://reddeparquesnacionales.mma.es/parques/index.htm">Red de PP.NN.</a>
    				</span>
    <span class="creador">V&iacute;ctor Funcia Tom&eacute;.</span>
  </div>
</div>