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>
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*/
}