div ne se positionne pas correctement avec un en-tête fixe

J'ai un en-tête avec position:fixed. Au sein de cette tête il y a une div qui est d'une hauteur variable, min-height: 60pxdiv ne se positionne pas correctement avec un en-tête fixe

Maintenant, il y a un div appelé conteneur en dessous de la div d'en-tête qui a le code CSS suivant:

width: 1007px; 
padding: 60px 0 0 0; 
display: block;

Maintenant, cela fonctionne très bien Tant que l'en-tête est 60px, mais lorsque la hauteur de l'en-tête augmente, le haut du conteneur est masqué par l'en-tête. Comment est-ce que je vais régler ceci de sorte que si la hauteur de l'en-tête change dynamiquement pour dire 90px, le div de conteneur bougera juste au-dessous, selon cette nouvelle taille?

Html est la suivante:

<div id="wrapper"> 
<header style="width: 100%; display: block; position: fixed; z-index: 1;"> 
    <div class="b-block" style="min-height:60px;display: block;">blah blah</div> 
</header> 
<div id="container" style="width: 1007px; padding: 60px 0 0 0; display: block;">blah blah</div> 
</div>

Source

2013-05-31 user1038814

Je pense que ce n'est pas possible avec ** CSS ** parce que le 'container' n'est pas _fixed_ comme' header'. Néanmoins, voici une [solution JQuery] (http://jsfiddle.net/vucko/57hvR/). – Vucko

Le problème est sur cette position: fixe situé sur la

–

@Vucko - merci, malheureusement, votre solution ne fonctionne pas, comme quand j'ai ajouté du contenu à la div dans l'en-tête de l'inspecteur de l'élément pour augmenter la hauteur, le récipient dv n'est pas descendu. – user1038814

Ce que vous vivez est un comportement normal puisque l'en-tête a positionnement fixe. La seule façon d'obtenir ce que vous voulez, si le contenu de l'en-tête change, est de changer dynamiquement le padding du #container, avec javascript.

Voici un exemple: http://codepen.io/seraphzz/pen/milpv

Vous obtenez la hauteur de l'en-tête et le définir comme rembourrage supérieur pour le #container div.

Source

2013-06-01 00:52:35 Raz

div ne se positionne pas correctement avec un en-tête fixe

Répondre

Questions connexes