Imagino que a medida que avance en su realización, lo siguiente no será funcional ni recomendable.
Así mismo, este tipo de construcciones se deben utilizar para casos/situaciones muy concretas y donde todas las variables estén bajo control.
Me lo tomo, y también la soluccción propuesta, como un mero ejercicio teórico, pues después tendrá que añadir contenidos, header, footer... etc.
Vamos con ello:
Si hace uso de la propiedad position con valor absolute sólo es cuestión de recordar que las coordenadas complementarias (top, right, bottom, left) no sólo sirven para indicar un punto de referencia para situar una caja, sino también para marcar desde dónde a dónde se extenderá la misma.
Así que ahora ya es fácil dejar un espacio superior y ocupar el resto de la ventana sin que aparezca el scrool:
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> * {margin:0; padding:0; position: relative;}
html, body {
height: 100%;
background: #f5f5f5;
}
#contenedor {
position: absolute;
top: 40px;
bottom: 0;
margin: 0 10%;
background: #fe0;
width:80%;
}
Si se fija y va un poco más allá con este ejemplo, verá que también serviría para centrar verticalmente en la ventana un elemento sin usar los márgenes negativos y su peligro de desaparición al disminuir la ventana.
Pero no olvide las premisas iniciales.