Hola Matucasal
Cuando un diseño es al 100% de la ventana, alguno de sus componentes tienen que modificar su anchura para cubrir toda la ventana en sus distintos tamaños posibles.
En un diseño de 2 ó 3 "columnas", puedes dejar fijo el tamaño de alguna de ellas (en px) y la otra no definir anchura para que ocupe el resto de la ventana que queda libre.
O puedes marcar las anchuras en %, para que la relación entre ellas siempre sea igual.
Lógicamente, al disminuir la anchura de la ventana ha de crecer la altura de los elementos para seguir alojando el contenido.
Pero siempre es conveniente marcar un ancho mínimo para evitar problemas de colapso a bajas resoluciones y un máximo para evitar lo contrario en grandes.
En el siguiente ejemplo puedes ver el comportamiento de una página con anchura máxima a 1280 px, mínima a 770px y que, entre esos rangos de ventana, ocupa el 100% de su anchura.
Otros supuestos no los contemplo, pero seguramente en una página "real" habría que tenerlos en cuenta. Pero no es el caso.
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" lang="es-es"> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> * {margin: 0; padding:0; outline: none; border: 0;}
body, html {
background-color: #444;
height: 100%;
width: 100%;
}
#cabecera {
background: #990000;
width: 100%;
height: 5em;
}
#cuerpo {
position: relative;
background: #CC3300;
width: 100%;
min-width: 770px;
width: expression(document.body.clientWidth < 771? "770px": "auto" );
max-width: 1280px;
width: expression(document.body.clientWidth > 1281? "1280px": "auto");
margin-bottom: -3em;
overflow: auto;
margin: 0 auto;
}
#lateral {
width: 40%;
position: relative;
float: left;
background: #FF6600;
}
#principal {
float: left
position: relative;
padding: 10px;
font-family: monospace;
margin-left: 40%;
}
#pie {
position: relative;
height: 3em;
width: 100%;
background: #006600;
}
p {text-indent:5em;}
.corte {clear: both;}
<p>Lorem ipsum dolor sit amet consectetuer turpis habitasse tincidunt turpis dolor. Curabitur ut orci venenatis porttitor odio Curabitur justo laoreet mauris nibh. Convallis cursus libero Maecenas risus Curabitur wisi Vivamus urna ac Lorem. Cum auctor velit at Nam vel molestie risus gravida auctor quis. Malesuada dapibus consequat Sed nibh Proin.
</p> <p>Ante pulvinar libero malesuada pellentesque tincidunt vel non a Donec wisi. Sed non ac adipiscing congue pede dictumst enim pede Suspendisse faucibus. Metus id id hendrerit feugiat enim ante Nunc sed cursus Vivamus. Et augue Curabitur Quisque tristique eget elit ac nibh ligula interdum. Et in ac Proin et hac ut pede nulla diam at. Non libero pulvinar mauris at pulvinar nec.
</p> <p>Est neque justo ac et quis Nulla sem porttitor lacinia elit. Justo Nam condimentum Sed Integer Nunc Integer nec semper ut Morbi. Maecenas ipsum interdum dignissim Pellentesque eu et quis venenatis vel malesuada. Vestibulum sapien arcu eros semper.
</p> <p>Pede vitae Cum metus pharetra urna lorem orci id ornare et. Porta a egestas Suspendisse nec libero Curabitur lacinia Phasellus enim et. Tincidunt nulla Curabitur urna mauris massa mauris vel Ut eu fringilla. Ut ut non et Pellentesque leo dolor lobortis turpis quis lacus. Tempor tellus purus Nullam sollicitudin nisl amet consequat orci sem Aenean. Elit et vel Sed quis porttitor tempor tempor elit felis velit.
</p> <p>Tellus massa Morbi neque semper nibh gravida justo vel ligula gravida. Mus eu ac nulla Donec augue Vestibulum eget Nullam lorem faucibus. Nec pellentesque eros adipiscing tellus ac et sed justo metus vitae. Sodales Morbi et risus nec ligula ac Aliquam porttitor Cum Sed. Est sit ac dapibus nunc enim pretium.
</p> <p>Nibh eu a velit et et Nam ante Suspendisse auctor orci. Nisl eu Sed sem nibh massa vitae elit elit eget elit. Sit urna ut Curabitur Morbi adipiscing habitasse tellus eros natoque turpis. Convallis enim leo malesuada Maecenas In nascetur id pulvinar Curabitur pellentesque. Curabitur Nulla.
</p> <p>Dignissim id sit fringilla metus odio mollis et quis quis commodo. A Nulla et fames quis augue consequat libero lobortis in penatibus. Euismod ac id condimentum tincidunt fames turpis tempus Sed semper Phasellus. Feugiat nunc leo Pellentesque Vivamus lacus congue ac id tellus fringilla. Elit.
</p> <p>Eros nec quis ligula senectus sed Ut a ullamcorper interdum dolor. Pretium eget laoreet urna libero metus vitae risus Vestibulum congue scelerisque. Nulla rutrum Mauris justo Vestibulum nibh Pellentesque pretium Aliquam wisi id. Wisi venenatis adipiscing.
</p> <p>Dignissim dignissim vitae a convallis amet ligula augue auctor montes In. Dolor quis leo In purus Lorem neque pretium In magna senectus. Et nibh risus vitae penatibus nibh risus risus Suspendisse congue Morbi. Lobortis tortor Ut at Nunc et risus consectetuer enim volutpat leo. Eget laoreet malesuada elit eget cursus Cras magna sit at laoreet.
</p> <p>Nullam malesuada et interdum Donec enim tincidunt porttitor semper pede Suspendisse. Phasellus quis Vestibulum Curabitur sodales sit tincidunt justo Phasellus pellentesque mattis. Nunc enim dignissim velit ipsum et ipsum cursus nibh.
</p> <p>Lorem ipsum dolor sit amet consectetuer turpis habitasse tincidunt turpis dolor. Curabitur ut orci venenatis porttitor odio Curabitur justo laoreet mauris nibh. Convallis cursus libero Maecenas risus Curabitur wisi Vivamus urna ac Lorem. Cum auctor velit at Nam vel molestie risus gravida auctor quis. Malesuada dapibus consequat Sed nibh Proin.
</p> <p>Ante pulvinar libero malesuada pellentesque tincidunt vel non a Donec wisi. Sed non ac adipiscing congue pede dictumst enim pede Suspendisse faucibus. Metus id id hendrerit feugiat enim ante Nunc sed cursus Vivamus. Et augue Curabitur Quisque tristique eget elit ac nibh ligula interdum. Et in ac Proin et hac ut pede nulla diam at. Non libero pulvinar mauris at pulvinar nec.
</p> <p>Est neque justo ac et quis Nulla sem porttitor lacinia elit. Justo Nam condimentum Sed Integer Nunc Integer nec semper ut Morbi. Maecenas ipsum interdum dignissim Pellentesque eu et quis venenatis vel malesuada. Vestibulum sapien arcu eros semper.
</p> <p>Pede vitae Cum metus pharetra urna lorem orci id ornare et. Porta a egestas Suspendisse nec libero Curabitur lacinia Phasellus enim et. Tincidunt nulla Curabitur urna mauris massa mauris vel Ut eu fringilla. Ut ut non et Pellentesque leo dolor lobortis turpis quis lacus. Tempor tellus purus Nullam sollicitudin nisl amet consequat orci sem Aenean. Elit et vel Sed quis porttitor tempor tempor elit felis velit.
</p> <p>Tellus massa Morbi neque semper nibh gravida justo vel ligula gravida. Mus eu ac nulla Donec augue Vestibulum eget Nullam lorem faucibus. Nec pellentesque eros adipiscing tellus ac et sed justo metus vitae. Sodales Morbi et risus nec ligula ac Aliquam porttitor Cum Sed. Est sit ac dapibus nunc enim pretium.
</p> <p>Nibh eu a velit et et Nam ante Suspendisse auctor orci. Nisl eu Sed sem nibh massa vitae elit elit eget elit. Sit urna ut Curabitur Morbi adipiscing habitasse tellus eros natoque turpis. Convallis enim leo malesuada Maecenas In nascetur id pulvinar Curabitur pellentesque. Curabitur Nulla.
</p> <p>Dignissim id sit fringilla metus odio mollis et quis quis commodo. A Nulla et fames quis augue consequat libero lobortis in penatibus. Euismod ac id condimentum tincidunt fames turpis tempus Sed semper Phasellus. Feugiat nunc leo Pellentesque Vivamus lacus congue ac id tellus fringilla. Elit.
</p> <p>Eros nec quis ligula senectus sed Ut a ullamcorper interdum dolor. Pretium eget laoreet urna libero metus vitae risus Vestibulum congue scelerisque. Nulla rutrum Mauris justo Vestibulum nibh Pellentesque pretium Aliquam wisi id. Wisi venenatis adipiscing.
</p> <p>Dignissim dignissim vitae a convallis amet ligula augue auctor montes In. Dolor quis leo In purus Lorem neque pretium In magna senectus. Et nibh risus vitae penatibus nibh risus risus Suspendisse congue Morbi. Lobortis tortor Ut at Nunc et risus consectetuer enim volutpat leo. Eget laoreet malesuada elit eget cursus Cras magna sit at laoreet.
</p> <p>Nullam malesuada et interdum Donec enim tincidunt porttitor semper pede Suspendisse. Phasellus quis Vestibulum Curabitur sodales sit tincidunt justo Phasellus pellentesque mattis. Nunc enim dignissim velit ipsum et ipsum cursus nibh.
</p> <p>Eget wisi elit Vestibulum congue ut quis urna Sed quis tortor. Mattis interdum urna tempor Nam orci et quis Aenean orci eget. Augue odio dui pede convallis nisl sagittis enim et lacinia a. Pede Curabitur consectetuer Ut nec velit lacinia nascetur eget Curabitur gravida. Consequat eros cursus justo Nullam.
</p> <p>Semper tortor interdum sagittis nibh est a pellentesque Vestibulum adipiscing Aenean. Ut at eget Pellentesque nulla Nullam justo odio semper congue hendrerit. Diam justo nulla ultrices facilisi sapien consequat volutpat sapien vitae Pellentesque.
</p>
Espero que te ayude a ver un poco más claro el tema del 100%
Un saludo