Problema con altura del contenedor principal

yafuslae · #1 (**permalink**) 16/10/2012, 06:19

Hola a todos. Mi problema consiste en que el contenedor principal de la web se me ajusta al 100% de la altura del navegador pero no al 100% de lo que ocupa la web como si hace una capa inferior que es la que digamos dicta la altura que además es variable en función del número de videos que contenga.
Vamos, un lio

.

El html:

Código:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="multimedia.css" title="style">
    <title></title>
  </head>
  <body>
    <section id="contenedor">
      <header>
        <!-- fin header --> </header>
      <nav>
        <ul>
          <li>Películas</li>
          <li>Música</li>
          <li>Imágenes</li>
        </ul>
        <!-- fin de nav> --> </nav>
      <section id="principal">
        <section class="articulos">
          
          <article> 
            <video controls="controls" source src="videos/video01.mp4" type="video/mp4"> </video>
          </article>
          <article> 
            <video controls="controls" source src="videos/video01.mp4" type="video/mp4"> </video>
          </article>
          <article> 
            <video controls="controls" source src="videos/video01.mp4" type="video/mp4"> </video>
          </article>
          <article> 
            <video controls="controls" source src="videos/video01.mp4" type="video/mp4"> </video>
          </article>
                   
        <!-- fin articulos --></section>
          <aside id="col_derecha">
            <p id="top">TOP</p>
              <video controls="controls" src="videos/video01.mp4"> </video>
              <video controls="controls" src="videos/video01.mp4"> </video>
              <video controls="controls" src="videos/video01.mp4"> </video>
              <video controls="controls" src="videos/video01.mp4"> </video>
          <!-- fin col_derecha --> </aside>
        <!-- fin principal --></section>
      <footer></footer>
      <!-- fin contenedor --> </section>
  </body>
</html>

El css:

Código:

*{
margin:0;
padding:0;


}	

body{
	background-color: #CBDBFF;
	}
html, body { height: 100%; display:table; }
#contenedor{
    width:900px;
    height:inherit;
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    left:0; right:0;

    margin-top:20px;

   
    background-color: #B0C9FF;
    border:1px solid red;
}



    header{

        width:900px;

        height:100px;

        border:1px solid purple;

    }

    

    nav{

        width:900px;

        height:30px;

        border:1px solid blue;

    }

    nav ul{

        float: left;

        list-style-type: none;

        padding: 0; 

        position: relative; 

        left: 50%;

    }

    nav ul li{

        padding:10px;

        margin:50px;

        font-size:1.5em;

        display:inline;   

        position: relative; 

        right: 50%;

    }

    

    

    #principal{

        width:inherit;
        position:absolute;
        min-height:100%;

        border:1px solid white;



        

    }

    

    #principal #col_derecha{ 

        width:250px;

        position:relative;

        float:right;
        padding-top:15px;

    }

    

      #col_derecha #top{

        font-size:2em;

        position:relative;

        text-align:center;
        border:1px solid black;  
             

      }

      

    #principal .articulos{

        width:640px;

        float:left;
        
		 

    }
    video {

        max-width:95%;

        padding-top:5%;
        /*Centrar elemento
        	 Es el sinonimo de <center> en html*/
        display:block;
        margin-left: auto;
        margin-right:auto;
        /*Fin de centrado*/

      }

chrishxc · #2 (**permalink**) 16/10/2012, 10:46

Al #contenedor añádele la siguiente línea de css

Código CSS:

Ver originaloverflow:hidden;

Si quieres un poco más de info del porque esta línea de texto, mírate este link:
http://www.librosweb.es/css_avanzado...ar_floats.html

Yo hace poco lo aprendí. Hasta ahora usaba divs vacíos. El problema de tu código es que no tenía el div vacío para que la capa contenedor se adaptara a los floats del contenido.

yafuslae · #3 (**permalink**) 16/10/2012, 13:48

chrishxc tú solución me ha funcionado, aun que ha sido necesario añadir otro overflow en #principal. Muchas gracias, tú ayuda ha sido muy útil.

chrishxc · #4 (**permalink**) 17/10/2012, 07:21

hmmm.... raro...
No veo el motivo a poner un overflow a #principal... pero tendría que probarlo.
Si lo ves bien es lo que cuenta al fin y al cabo ;)

Me alegro que te haya funcionado.

yafuslae · #5 (**permalink**) 17/10/2012, 15:26

Por que este a su vez tiene varios elementos dentro. Eso si, mano de santo.