Adaptar web al 100% de la pantalla

marcgarcia51 · #1 (**permalink**) 18/09/2015, 12:53

Buenas, me queda un espacio en blanco (grande)debajo de los elementos del div, cuyos elementos ocupan mucho menos (son texto).
Aca pueden ver como queda:
https://jsfiddle.net/qx0rL9r7/1/embedded/result/
Como pueden ver hay que hacer scroll para ir al final de la página. No entiendo porque se alarga tanto el div. Esperaba que el footer se quedara pegado al borde inferior de la ventana, visto que el div "main" tiene height: 100%, es decir que ocupe el espacio que quede dentro de su padre. Puede que sea un error tonto y no lo vea, gracias por la ayuda.

Código HTML:

<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8">
    <!-- enlazamos pagina de estilos -->
   <link rel="stylesheet" href="style.css"/>
      </head>
  <body>
  		<header id="header-principal" class="menu_bar">
		  <div id="logo" >
		   <a href="index.html" ><img id="img1" src="logo.png" ></img> </a>
       		  </div>
		  <div class="container">
		   <nav>
			 <table align="center" width="80%">
			 		<tr>
					<td><a href="">enlace1</a></td>
					<td><a href="">enlace2</a></td>
					<td><a href="">enlace3</a></td>
					<td><a href="">enlace4</a></td>
					</tr>
			</table>
		</nav>
		</div>
		</header>
               <div id="main">
			 <article id="articulo-uno">
			 		<header class="articulo-header">
							<h2>texto</h2>
					</header>
							<p class="articulo">textooooooooooooooooooooooooooooooooo
oooooooooooooooooooooooooooooooooooooooooo
oooooooooooooooooooooooooooooooooooooooooo</p>
			</article>
					 
			<article id="articulo-dos">
					 <header class="articulo-header">
							<h2>texto2</h2>
					</header>
							<p class="articulo">textooooooooooooooooooooooooooooooooooo
ooooooooooooooooooooooooooooooooooooooo
ooooooooooooooooooooooooooooooooooooooo2</p>
			</article>
		</div>
		
		<footer >
		<p>aqui el footer.</p>
		</footer>
  </body>
</html>

Código:

html{
width:100%;
height:100%;
margin:0px;
}
body{
margin:auto;
font-family:'Questrial';
height:100%;
width:100%;
 }

#img1{
width:auto;
display:block;
z-index:1;
margin-right:auto;
margin-left: auto;
 }
#logo{
height: 79px;
background: black url('fondo.png') repeat;
width:100%
 }
nav {
width:100%;
background-color:#F6E3CE;

 }
nav table{

height:60px;
padding-top:10px;
 }
 
nav table tr td {
letter-spacing: 0.09em;
text-transform: uppercase;
margin-left:auto;
margin-right:auto;
}
nav table tr td a {
text-decoration:none;
color:black;

 }
footer{
width:100%;
height:100px;
text-align:center;
background: grey url('fondo.png') repeat;
 }
footer p {
position:relative;
padding: 2em 0em;
 }
#main{
display:inline-flex;
width:100%;
height:100%;
}

#articulo-uno{
width:auto;
height:200px;
float:left;
margin-left:20%;
}
 

 
#articulo-dos{
width:auto;
height:200px;
float:right;
padding-left:20px;
margin-right:20%;
}

MrGilbertMan · #2 (**permalink**) 18/09/2015, 14:05

hola,

al ponerle height:100%, no le estas dando el 100% RESTANTE desde header al pie de página.

Si mi resolución es de 750px de altura, el div main tendrá height:750px con lo cual tenemos la altura de header + toda mi resolución.

Una posible solución (mientras no tengas contenido) para que el footer quede abajo:

Código CSS:

Ver originalfooter
{
position:absolute;
bottom:0;
}

marcgarcia51 · #3 (**permalink**) 18/09/2015, 15:20

Cita:

Iniciado por MrGilbertMan

hola,

al ponerle height:100%, no le estas dando el 100% RESTANTE desde header al pie de página.

Si mi resolución es de 750px de altura, el div main tendrá height:750px con lo cual tenemos la altura de header + toda mi resolución.

Una posible solución (mientras no tengas contenido) para que el footer quede abajo:

Código CSS:

Ver originalfooter
{
position:absolute;
bottom:0;
}

No entendí lo de

Código:

al ponerle height:100%, no le estas dando el 100% RESTANTE desde header al pie de página.

MrGilbertMan · #4 (**permalink**) 20/09/2015, 15:41

Hola de nuevo

si mi resolución es de 750px de altura y le das a un div una altura height:100%, le estas dando 750px de altura al div (lo que supone a una pantalla completa) por eso tienes que hacer scroll.

xfxstudios · #5 (**permalink**) 20/09/2015, 18:47

debe ser asi:

Código CSS:

Ver original/*aplicamos el alto al body y httml*/
html, body{
heigth: 100%;
}
/*quitamos margenes al body*/
body{
marging: 0px;
}
/*comenzamos a maquetar*/
/*aplicamos al header el porcentaje que deseamos que mantenga*/
.header{
heigth: 20%;
/*resto de estilos*/
}
.content{
heigth: 60%;
/*resto de estilos*/
}
.footer{
heigth: 20%;
/*resto de estilos*/
}

de esta manera sea cual sea la pantalla el va a mantener el mismo alto en cada uno de esos elementos