Cómo arreglar el código de diseño de mi sitio web

Estás usando screen.availWidth y screen.availHeight, que te dice el ancho / alto de la pantalla, no el cuerpo. Si desea obtener el ancho / alto del cuerpo, use document.body.offsetWidth y offsetHeight.

Pero ese no es el mayor problema con su código. El mayor problema con su código es que está usando JavaScript para el diseño en lugar de CSS. Es más lento, no responde y está haciendo mucho trabajo adicional para usted. Como mínimo, debería usar porcentajes en lugar de px, ¡pero hágalo en su archivo CSS!

Intente eliminar su código JavaScript y use este CSS en su lugar:

cuerpo {
margen: 0px;
relleno: 0px;
borde: 0px;
}

#Header {
posición: absoluta;
arriba: 0px;
izquierda: 0px;
ancho: 100%;
altura: 10%;
color de fondo: azul;
}

#Dejar de lado {
posición: absoluta;
arriba: 10%;
izquierda: 0px;
ancho: 12.5%;
altura: 80%;
color de fondo: rojo;
}

#MidSection {
posición: absoluta;
arriba: 10%;
izquierda: 12.5%;
ancho: 75%;
altura: 80%;
color de fondo: amarillo;
}

#RightAside {
posición: absoluta;
arriba: 10%;
izquierda: 87.5%;
ancho: 12.5%;
altura: 80%;
color de fondo: verde;
}

#Footer {
posición: absoluta;
arriba: 90%;
izquierda: 0px;
ancho: 100%;
altura: 10%;
color de fondo: naranja;
}