Otra posibilidad más entre muchas otras.
Mantengo el menú superior siempre fijo en la pantalla.
Le doy posición absoluta a las dos columnas laterales.
Para las dos establezco la altura como auto en lugar de 100%. (height:auto)
A las dos le doy la propiedad top:15px (suponiendo que el menú tiene 15 px de altura) y bottom:0
La columna izquierda queda alineada a la izquierda y a la columna derecha le doy la posición right:0 y left:300px y el ancho con width:auto
Todo esto te asegura que la pantalla siempre se cubra. La barra de desplazamiento sólo aparece si el contenido sobrepasa la altura de la ventana del navegador.
De esta forma también se evita utilizar la propiedad float.
Si necesitas añadir un pie, la cosa se complica un poco más, pero el esquema sigue siendo el mismo.
Conviene añadir un ancho mínimo para la página que no he incluido.
<style type="text/css">
body {
margin:0;
}
#izda {
background-color: #456789;
bottom: 0;
position: absolute;
top: 15px;
width: 300px;
}
#dcha {
background-color: #FF6677;
bottom: 0;
height: auto;
left: 300px;
position: absolute;
right: 0;
top: 15px;
width: auto;
}
#menu {
background-color: #222222;
bottom: 0;
height: 15px;
position: fixed;
top: 0;
width: 100%;
}
</style>
<body>
<div id="menu"></div>
<div id="dcha"></div>
<div id="izda"></div>
</body>
