44 votes

Ted Wong avatar

Comment créer cette disposition d'en-tête, de contenu et de pied de page à l'aide de CSS ?

Demandé el 19 de Août, 2011
Quand la question a-t-elle été
145021 affichage
Nombre de visites la question a
2 Réponses
Nombre de réponses aux questions
Ouvert
Situation réelle de la question 
 ______________________
|        Header        |
|______________________|
|                      |
|                      |
|        Content       |
|                      |
|                      |
|______________________|
|        Footer        |
|______________________|

J'aimerais créer cette interface utilisateur, et chaque élément est un div. La hauteur de l'en-tête est de 30px. Et le pied de page est de 30px. Mais je ne connais pas la hauteur du contenu. J'ai besoin d'utiliser le cadre de l'utilisateur pour calculer.

La hauteur totale doit être de 100 %.

Puis-je le faire en CSS pur ?

Demandé el 19 de Août, 2011 par Ted Wong

Réponses

Trop de publicités?

1voto

Rohit Soni avatar
Rohit Soni Points 29

Vous trouverez ci-dessous un exemple de code et vous pouvez exécuter un extrait pour voir le résultat.

html,body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

sidenav{
   border:1px solid black;
   flex: .3;
}

container{
  border:1px solid black;
  flex: 1;
}

header{
  border:1px solid black;
  flex:.1;  

}

content{
  display:flex;
  flex:1;
  border:1px solid black;
}

footer{
  border:1px solid black;
  flex:.1;  
}

<body>

<header >header</header>
<content>
<sidenav>sidenav</sidenav>
<container>container</container>
</content>
<footer>footer</footer>

</body>
Répondu el 31 de Août, 2021 par Rohit Soni (29 Points )

0voto

atrueresistance avatar
atrueresistance Points 1270

Essayez ceci

CSS

.header{
    height:30px;
}
.Content{
    height: 100%; 
    overflow: auto;
    padding-top: 10px;
    padding-bottom: 40px;
}
.Footer{
    position: relative;
    margin-top: -30px; /* negative value of footer height */
    height: 30px;
    clear:both;
}

HTML

  <body>
    <div class="Header">Header</div>
    <div class="Content">Content</div>
    <div class="Footer">Footer</div>
  </body>
Répondu el 19 de Août, 2011 par atrueresistance (1270 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X