Sujet Précédent Sujet Suivant

Placement de bloc entete, menu et contenu

Fermé
Vagabonde64 Messages postés 12 Date d'inscription mercredi 23 mai 2018 Statut Membre Dernière intervention 27 août 2019 - Modifié le 23 août 2018 à 13:46
Vagabonde64 Messages postés 12 Date d'inscription mercredi 23 mai 2018 Statut Membre Dernière intervention 27 août 2019 - 29 août 2018 à 17:29
Bonjour,

Je rencontre quelque difficulté sur un problème qui me semble assez simple. J'ai fait quelques recherche et j'ai trouvé sur le net plusieurs personnes qui avait le même problème que moi mais je n'arrive pas à mettre en place une solution.

J'aimerais faire un site qui ressemble à cela au niveau structure
:

Voici donc une partie du Html : 
<body>
 <div id="entete"><!-- ... --></div>  
 <div id="menu"><!-- ... --></div>   
 <div id="contenu"><!-- ... --></div>
</body>


Et le css de ma balise menu pour le placement(les autres n'ont aucune information sur la taille) : 
#menu {
 height: 100%; 
 width: 200px;
        float: left;
}


D’après ce que j'ai vu, le height:100%; indique que la hauteur de mon menu est égale à celle de mon body. Hors l'hauteur de mon body devrait être égale à la hauteur de mon entête plus soit la hauteur de mon menu soit la hauteur de mon contenu (le plus grand). Hors avec ce code, mon contenu passe sous mon menu.
J'ai aussi essayer de mettre un autre <div> qui englobe mon menu et mon contenu pour ne pas prendre en compte la hauteur de mon en tête mais cela ne change rien.

Pour que mon contenu ne passe pas sous le menu, la seule solution que j'ai trouvé pour le moment c'est d'avoir une hauteur fixe pour mon menu mais cela ne résous que temporairement mon problème puisque selon les pages, je n'ai pas la même hauteur de contenu.

Es-ce qu'il existe une solution pour que la taille de mon bloc menu soit de la même taille que celle de mon contenu ?

(j'aimerais éviter que chacune de mes pages aient une hauteur fixe différente)
A voir également:

1 réponse

Réponse 1 / 1
Vagabonde64 Messages postés 12 Date d'inscription mercredi 23 mai 2018 Statut Membre Dernière intervention 27 août 2019 1
29 août 2018 à 17:29
Bonjour

J'ai trouvé sur un autre site une solution à mon problème.

Déjà j'ai modifié le html : 
<header><!-- ... --></header>  
<div id="corps">
  <nav>...</nav>
  <div id="contenu">
    <section></section>
    <section></section>
  </div>
</div>


et pour le css : 
#corps {
	display: flex;
}

sans float et une taille fixe uniquement pour la largeur de mon menu.
0

Discussions similaires

Savoir de quel ville à été envoyé le message
pedro1209 -
Pierr10 -

7 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Youtube: Ce contenu n'est pasdisponible dans votre pays
nesrinedu30 -
Ref1 -

10 réponses