En-tête réactif avec menu déroulant: hauteur et débordement

J'ai besoin d'un en-tête responsive, qui change de hauteur en fonction de la résolution de l'écran et de l'encapsulation des éléments. À mesure que l'écran devient plus petit, le menu s'enroule sous mon logo (ce qui est souhaitable) et la hauteur de l'en-tête doit augmenter. Évidemment, j'ai placé les propriétés de l'en-tête à height: auto et overflow: hidden et ceci fera l'affaire.En-tête réactif avec menu déroulant: hauteur et débordement

Le problème est: J'utilise un menu déroulant. En utilisant height: auto et overflow: hidden au lieu d'une hauteur fixe pour l'en-tête, rend les éléments de liste déroulante bien ... caché bien sûr.

Ma question est maintenant: quelle est la meilleure façon de résoudre ce problème? Des solutions avec CSS pur préféré.

Source

2014-04-23 MrOrange

Sans code, il est généralement difficile de deviner quel est le problème exact, et deviner les réponses est généralement la seule chose que n'importe qui peut faire. Si vous fournissez un morceau de code de vos tentatives précédentes, il sera beaucoup plus facile de comprendre quel est le problème exact que vous rencontrez. Ce morceau de code peut même être du code qui ne fonctionne pas du tout, car cela donnerait une meilleure idée de ce que vous essayez de faire exactement. – Joeytje50

Je pense que la description est assez claire: la hauteur de l'en-tête doit dépendre du contenu (pour lequel vous utilisez habituellement 'overflow: hidden'), mais affiche toujours les éléments déroulants du menu qui est dans l'en-tête. Si ce n'est pas assez clair, je posterai du code demain. – MrOrange

Mais pourriez-vous montrer du code s'il vous plaît? Sans cela, je n'ai aucune idée de ce que je suis censé travailler. – Joeytje50

Utilisez une correction claire au lieu du débordement caché. Vous voulez effacer les flottants et ne pas masquer le débordement. Lisez à ce sujet ici:

http://nicolasgallagher.com/micro-clearfix-hack/

<header class="clear-fix"></header>

Il y a des façons plus élégantes si vous utilisez un préprocesseur etc.

.clear-fix:before, 
.clear-fix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clear-fix:after { 
    clear: both; 
}

Voici a jsFiddle qui devrait aider.

Source

2014-04-24 00:45:43 sheriffderek

Wow, c'est parfait! Une solution si simple après tant d'heures à essayer de contourner le débordement caché. Je suis vraiment content avec ce @sherrifderek, la réactivité de mon site est vraiment réunie maintenant :) Merci! – MrOrange

Génial. Bonne chance! Ouais, jetez un coup d'oeil à des choses comme «overflow caché» - il y a beaucoup de choses comme ça que les gens s'habituent à cause des réponses courtes ici, parce qu'ils sont faciles - mais les gens ne comprennent pas comment ils fonctionnent - et finissent par provoquant toutes sortes de problèmes. – sheriffderek

@sherrifderek: J'ai une question de suivi en retard! :) Avec cette solution l'en-tête est réactif (ce qui est toujours la priorité), mais comme mon en-tête a une bordure de 5px avec les éléments déroulants en dessous, il y a maintenant une marge de 5px non cliquable dans laquelle un visiteur peut 'perdre' n'est pas assez rapide pour naviguer de l'élément de menu aux éléments de liste déroulante. Cela vous dérange-t-il de jeter un coup d'œil à http://www.purasol.co.cr/v2/ et de me dire s'il y a des solutions à cela? Je ne peux pas simplement augmenter la marge de lien des éléments de menu puisque la bordure l'entoure maintenant. – MrOrange

En-tête réactif avec menu déroulant: hauteur et débordement

Répondre

Questions connexes