Problema menu fixed y padding

[warywin]

Hola, mi problema esque mi header-menubar, esta fijo y el main o la pagina principal al tener un 100% ocupa toda la pantalla posicionandose tambien debajo del header como si este no estuviera o no fuera relativo, no se si me entendeis. He probado todo, me funciona añadiendo el padding-left:80px al main pero cuando uso jquery para animar la pagina esto me crea un problema y me gustaria no usar ningun padding que podria hacer? ya no se me ocurre nada

HEADER-MENU:

Código CSS:

header{
        position: fixed;
        width: 80px;
        min-height: 100%;
        background: #555; 
        float: left;
        z-index: 9999;
    }
 

PRINCIPAL:

Código CSS:

.main{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    padding-left: 80px;
    background: #333;
    
}
 

[mardojai]

No logro a entender completamente tu problema, si pudieras pasar un link de la web subida como tal seria mejor.

Saludos!

[NueveReinas]

Yo tampoco comprendo muy bien el problema, pero quizá esto te sirva: https://mimentevuela.wordpress.com/2...ivs-relativos/

[warywin]

Iniciado por NueveReinas

Yo tampoco comprendo muy bien el problema, pero quizá esto te sirva: https://mimentevuela.wordpress.com/2...ivs-relativos/

Vale os lo vuelvo a explicar, el bascio problema esque el contenedor principal se mete debajo del header que es fixed. Como puede solucionar eso sin usar un padding? porque he utilizado posicion relativa y todo y no funciona.
Mas o menos el problema es como la explicacion que me has pasado pero no me lo arregla eso :(

[mardojai]

En todo caso un margin-top al contenedor con la altura del header.

[GemliosG]

Si no te funciona bien, puedes poner tu código aqui http://codepen.io/ para que lo probemos, y si nos sale bien lo posteamos también inlcuye html con el css

[inieva]

Una opción podría ser la siguiente aunque ojo con la compatibilidad. En todo caso podes hacer lo mismo con jquery.

.main{
width: calc(100% - 80px);
height: 100%;
box-sizing: border-box;
position: absolute;
right: 0;
background: #333;
}

[warywin]

Iniciado por inieva

Una opción podría ser la siguiente aunque ojo con la compatibilidad. En todo caso podes hacer lo mismo con jquery.

.main{
width: calc(100% - 80px);
height: 100%;
box-sizing: border-box;
position: absolute;
right: 0;
background: #333;
}

Perfecto! si que me ha servido eso de usar calc...en el width, pero que problemas de compatibilidad podria tener? lo he probado en chrome y firefox y funciona correctamente

[mardojai]

Compatibilidad con navegadores antiguos.

Con Jquery seria:

Código:

$(document).ready(function(){
    var fullheight = $(window).height() - 80;
    $('#contenedor').css('height', (fullheight)+'px');
});