Diseño de Sitio Web: Columna height 100%

Sephys · #1 (**permalink**) 06/12/2014, 19:44

¡Buenas! Vengo a pediros un poco de ayuda para ver si podéis ver donde puedo solucionar mi problemilla...

Me he creado una página web para poner en práctica varias cositas que voy aprendiendo en el curso. Os pondré directamente una página en concreto para que podáis ver el problema.

[URL="http://alumnodaw.esy.es/segundo-curso/desarrollo-web-en-entorno-cliente/modelos-de-programacion-en-entorno-clienteservidor/"]http://alumnodaw.esy.es/segundo-curso/desarrollo-web-en-entorno-cliente/modelos-de-programacion-en-entorno-clienteservidor/[/URL]

Tengo una columna que hace de header y menú principal. El problema como podréis apreciar en esa primera parte es que termina el contenido principal y mi columna verde sigue. Eso es porque le he puesto un height a ese div de un tamaño fijo porque no consigo que el tamaño del header vaya dinámicamente según el contenido de los contenidos.

He aquí los códigos:

Código HTML:

<body>
	<header class="page-header">

    <h1>
      <a href="http://alumnodaw.esy.es/">Desarrollo de Aplicaciones Web</a>
    </h1>

		<p class="strapline">Desarrollo Web en Entorno Cliente</p>
				
		
    
	</header>

	<div role="main" class="main">
 
		
    <div id="posts">
      <h1><?php the_title(); ?></h1>
      
      <div id="post-contenido">
        <?php if (have_posts()):while(have_posts()):the_post(); ?>
        
        <?php the_content(); ?>
        
        <?php endwhile ?>
        <?php endif; ?>
      </div>
      
      <?php get_footer() ?>
    </div>
		
    
		
	</div>
  
  

	</body>

Código CSS:

Ver originalhtml, body{
    height:100%;
  }
    body {
   margin: 0; 
   font-size: 1em; 
   line-height: 1.4; 
   font-family: Arial;
 }
 
a { 
  color: #6a6a6a; 
  text-decoration: none; 
}
 
a:hover {text-decoration: underline; }
 
a:hover, a:active { outline: 0; }
 
p.copyright {
    padding: 0;
    margin: 0 0 0 7px;
    font-size: 0.9em;
}   
 
 
@media screen and (min-width : 621px) {
    /* Bigger screens - iPads and up */
 
 
/*
    ----------------------------------------------------------------------------------
    'HEADER' STRUCTURE
    ----------------------------------------------------------------------------------
*/
 
div.main    {
    margin-right: 260px;
  height:auto;
  min-height:100%;
  
}
 
#post-contenido :after{
  width:100%;
  display:block;
  clear:both;
}
 
.page-header    {
    background: #b7cf00;
    color: #fff;
    width: 260px;
  position:absolute;
    padding: 12px 17px;
    top: 0;
    right: 0;
  height:2000px;
}
 
.page-header h1 {
    margin: 0 0 4px 0;
    padding: 0;
    width: 260px;
    height: 110px;
  text-align: center;
}
 
.page-header h1 a   {
    display: block;
    width: 260px;
    height: 105px;
  font-size: 30px;
}
 
.strapline  {
    color: #818080;
    font-weight: bold;
    padding: 0;
    margin: 0 0 26px 0;
  text-align:center;
}
 
.page-header a  {
    color: #fff;
}
.page-header a:hover    {
    color: #818080;
  text-decoration:none;
}
 
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-size: 14px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 250px;
}
#cssmenu > ul > li > a {
  font-size: 25px;
  font-weight: bold;
  display: block;
  background: #b7cf00;
  color: #ffffff;
  border-bottom: 1px solid white;
  text-transform: uppercase;
}
#cssmenu > ul > li > a > span {
  background: #b7cf00;
  padding: 10px;
  display: block;
  font-size: 13px;
  font-weight: 300;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  color: #fff;
}
#cssmenu > ul > li.active > a span {
  background: #95A900;
}
#cssmenu span.cnt {
  display:none;
}
/* Sub menu */
#cssmenu ul ul {
  display: none;
}
#cssmenu ul ul li {
  border: 1px solid #e0e0e0;
  border-top: 0;
}
#cssmenu ul ul a {
  padding: 10px;
  display: block;
  color: #b7cf00;
  font-size: 13px;
}
#cssmenu ul ul a:hover {
  color: #95A900;
}
#cssmenu ul ul li.odd {
  background: #f4f4f4;
}
#cssmenu ul ul li.even {
  background: #fff;
}
 
#posts{
  width:85%;
  margin:15px 20px 0px 50px;
  height:100%;
}
 
#posts h1{
  color:#b7cf00;
  line-height: 60px;
  text-align:center;
  margin-top:35px;
  border-bottom:2px solid #b7cf00;
  
}
 
#post-contenido{
  width:100%;
  margin: 15px;
}
 
#footer{
  height:50px;
  padding-top:20px;
}

He intentado todo lo aconsejado por San Google, desde poner al body y al html un height:100% hasta cambiar los posicionamientos con todas las posibilidades (lo he dejado en absolute por simplificarme la vida) pasando por usar heights, min-heights y max-heights en todos los contenedores.

Si podéis iluminarme que es lo que estoy haciendo mal xD.

PD: He tenido que quitar el div del menu porque no me deja poner tantas lineas en el post xD