Cuando se escale el navegador se ajusten el contenido

[ceaped]

Buenos días
Deseo que cuando se escale el navegador la página se escale verticalmente.

¿Cómo hago para que mi .css se ajuste?

Código CSS:

* {
    margin:0; 
    padding:0; 
    border:0;
}
 
html, body {
    font-family: Verdana, Geneva, sans-serif;
    width: auto;
    height: 100%;
    background-color: #FFFFFF;
    }
 
header{
    background-color: transparent;
    color: #FFF;
    width: 98%;
    height: 5.5%;
    margin: 0px auto;
    padding-top: 50px;
    padding-bottom: 50px;
    }
 
/* menu principal */ 
nav{
    position: relative;
    background-color: #E1DDDD;
    color: #FFF;
    width: 98%;
    height: 40%;
    /* display: inline-block; */
    margin-left: auto;
    }
    
.marco_btn_1{
    position: relative;
    float: left;
    background-color: #F5D963;
    color: #FFF;
    width: 32.6%;
    height: 100%;
    /* display: inline-block; */
    margin-top: 0px;
    margin-right: 5px;
    margin-left: 0px;
    margin-bottom: 0px;
    float: left;
    }
    
.marco_btn_1 :hover{
    opacity: .70;
    -moz-opacity: .70;
    filter: alpha(opacity=50);
    }
    
.marco_btn_1 img{
    display: block;
    margin: auto;
    }
    
.marco_btn_2{
    position: relative;
    float: left;
    background-color: #C0F472;
    color: #FFF;
    width: 32.6%;
    height: 100%;
    display: inline-block;
    margin-top: 0px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 0px;
    }
    
.marco_btn_2 :hover{
    opacity: .70;
    -moz-opacity: .70;
    filter: alpha(opacity=50);
    }
    
.marco_btn_2 img{
    display: block;
    margin: auto;
    }
    
.marco_btn_3{
    position: relative;
    float: left;
    background-color: #7ED0F3;
    color: #FFF;
    width: 32.6%;
    height: 100%;
    display: inline-block;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 5px;
    margin-bottom: 0px;
    }
    
.marco_btn_3 :hover{
    opacity: .70;
    -moz-opacity: .70;
    filter: alpha(opacity=50);
    }
    
.marco_btn_3 img{
    display: block;
    margin: auto;
    }
/* FIN menu principal */
 
 
section{
    position: relative;
    float: left;
    background-color: #D9ECE1;
    width: 98%;
    height: 10%;
    display: inline-block;
    }
 
article{
    background-color: #0CC;
    width: 98%;
    height: 15%;
    color: #FFF;
    }
 
aside{
    position: relative;
    background-color: #7A7;
    width: 18%;
    height: 55%;
    color: #FFF;
    float: left;
    }
 
 
/* boton bienestar */
.marco_btn_bienestar{
    position: relative;
    float: left;
    background-color: #B1EB83;
    width: 49%;
    height: 100%;
    display: inline-block;
    margin-top: 0px;
    margin-right: 5px;
    margin-left: 0px;
    margin-bottom: 0px;
    }
    
.marco_btn_bienestar img{
    display: block;
    margin: auto;
    padding-top: 25px;
    }
.marco_btn_bienestar :hover{
    opacity: .50;
    -moz-opacity: .50;
    filter: alpha(opacity=25);
    }
/* FIN boton bienestar */
 
 
/* boton investigacion */
.marco_btn_investigacion{
    position: relative;
    float: left;
    background-color: #B1EB83;
    width: 49%;
    height: 100%;
    display: inline-block;
    }
    
.marco_btn_investigacion img{
    display: block;
    margin: auto;
    padding-top: 20px;
    }
    
.marco_btn_investigacion :hover{
    opacity: .50;
    -moz-opacity: .50;
    filter: alpha(opacity=25);
    }
/* FIN boton investigacion */
    
 
/* footer y los logotipos */ 
footer{
    position: relative;
    background-color: #CDF1AB;
    width: 98%;
    height: 5%;
    clear: both;
    padding-top: 50px;
    }
    
.logo_footer_1 img{
    position: absolute;
    top: 50%;
    left: 20%;
    margin-top: -22px;
    margin-left: -22px;
    }
 
.logo_footer_1 a:hover{
    position: absolute;
    top: 50%;
    left: 20%;
    opacity: .50;
   -moz-opacity: .50;
   filter:alpha(opacity=25);
    }
    
.logo_footer_2 img{
    position: absolute;
    top: 50%;
    left: 35%;
    margin-top: -12px;
    margin-left: -22px;
    }
    
.logo_footer_2 a:hover{
    position: absolute;
    top: 50%;
    left: 35%;
    opacity: .50;
   -moz-opacity: .50;
   filter:alpha(opacity=25);
    }
    
.logo_footer_3 img{
    position: absolute;
    top:50%;
    left: 55%;
    margin-top: -12px;
    margin-left: -22px;
    }
    
.logo_footer_3 a:hover{
    position: absolute;
    top: 50%;
    left: 55%;
    opacity: .50;
   -moz-opacity: .50;
   filter:alpha(opacity=25);
    }
    
.logo_footer_4 img{
    position: absolute;
    top:50%;
    left: 75%;
    margin-top: -16px;
    margin-left: -22px;
    }
    
.logo_footer_4 a:hover{
    position: absolute;
    top:50%;
    left: 75%;
    opacity: .50;
   -moz-opacity: .50;
   filter:alpha(opacity=25);
    }
/* FIN footer y los logotipos */ 
 
 
header,section,footer,aside,article,nav{
    /*-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;*/
    margin: 1%;
}
 

Gracias por su ayuda

[pzin]

Especificas la altura porcentualmente ¿no? No hay más. ¿Te causa algún problema?

[ceaped]

Hola pzin
No no me causa problemas.
Sólo quiero que cuando la persona escale su navegador horizontalmente la página también se escale.

Gracias por tu ayuda

[pzin]

Pero escalar es muy vago. Quiero decir, pueden ser varias cosas. ¿Las imágenes? ¿La fuente? ¿El tamaño de los contenedores? ¿Todo ?

[ceaped]

Hola pzin
Es el tamaño de los contenedores, que se ubiquen verticalmente.

Gracias por tu ayuda

[pzin]

Pues lo dicho, especificas las alturas en porcentajes y ya está.