Layout con html5 y ccs3

elpapineo · #1 (**permalink**) 13/05/2015, 21:52

Saludos, hoy estaba tratando de crear un layout en HTML y CCS3 ya que tenia varios años alejado de la programación web (casi 4 años) y por fin lo logre a mi manera (no lo vi en ningún sitio web de tanto que busque) y quería compartirlo con ustedes para que me den su opinión al respecto y saber si esta bien hecho o si esta mal hecho, que le quitarían o que le cambiarían? el layout es parecido al de mail.live.com (hotmail) la dificultad que tenia era que las columnas de la izquiera y derecha tomaran la misma altura de la ventana del navergador es decir, que NO tuvieran una altura fija y que al redimencionar la ventana del navegador este layout se adaptara solo usando CSS3 (sin ayuda de javascript o jquery).

Codigo:

Código:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
html, body, header, nav, ul, li, aside, section, footer {
	margin: 0;
	padding: 0;
}
header {
	background-color: #FF8C00;
	width: 100%;
	height: 50px;
}
aside {
	float: left;
	width: 200px;
	height: calc(100vh - 70px);
	background-color: #FFD9CA;

}
section {
	float: left;
	width: calc(100% - 200px);
	height: calc(100vh - 70px);
	background-color: #3399FF;
}
footer {
	clear: both;
	width: 100%;
	height: 20px;
	background-color: #FF8C00;
}
</style>
</head>
	
<body>

<header></header>

<aside></aside>

<section></section>

<footer></footer>

</body>
</html>

Si tienen una mejor forma de hacerlo por favor compartirla, saludos..

NueveReinas · #2 (**permalink**) 14/05/2015, 01:44

Por lo visto no es responsive...

Respecto a la primera línea de CSS, ahora existe algo llamado normalize.css

elpapineo · #3 (**permalink**) 14/05/2015, 16:04

Se me olvido mencionar que estoy utilizando el navegador chrome Versión 42.0.2311.152 dev-m. Todavía no tengo muy claro el funcionamiento de responsive y si tengo añadido el normalize.css lo que pasa es que no coloque la etiqueta aquí.

Respecto a la 1ra linea de CSS la coloque porque el normalize no me inicializa todos esos elementos en margin 0 y padding 0;

Quiciera saber porque dices que no es responsive? Si al redimencionar la ventana del navegador el layout se adapta

El layout es para una aplicación web en desktop, por eso no le estoy tomando tanta importancia a lo de responsive.

Lo que me gustaría saber es que si existen otras formas de realizar este layout en CSS para que los contenedores aside y section sean del mismo alto y que el layout ocupe el mismo tamaño que la ventana del navegador? Si es así se agradece los ejemplos...

Saludos..