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

Question

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é
145020 affichage: Nombre de visites la question a
5 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

Answer 1

5 Réponses

Answer 2

53voto

Jeremy Karlsson Points 333

Avec flexbox, c'est facile à réaliser.

Placez l'emballage contenant vos 3 compartiments sur display: flex; et lui donner une hauteur de 100% o 100vh . La hauteur de l'enveloppe remplira toute la hauteur, et la valeur de display: flex; fera en sorte que tous les enfants de ce wrapper qui a les propriétés flexibles appropriées (par exemple flex:1; ) à contrôler à l'aide de la magie de la boîte à outils.

Exemple de balisage :

<div class="wrapper">
    <header>I'm a 30px tall header</header>
    <main>I'm the main-content filling the void!</main>
    <footer>I'm a 30px tall footer</footer>
</div>

Et CSS pour l'accompagner :

.wrapper {
    height: 100vh;
    display: flex;

    /* Direction of the items, can be row or column */
    flex-direction: column;
}

header,
footer {
    height: 30px;
}

main {
    flex: 1;
}

Voici ce code en direct sur Codepen : http://codepen.io/enjikaka/pen/zxdYjX/left

Vous pouvez voir plus de magie flexbox ici : http://philipwalton.github.io/solved-by-flexbox/

Ou trouver une documentation bien faite ici : http://css-tricks.com/snippets/css/a-guide-to-flexbox/

--[Ancienne réponse ci-dessous]--

Voilà : http://jsfiddle.net/pKvxN/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  header {
    height: 30px;
    background: green;
  }
  footer {
    height: 30px;
    background: red;
  }
</style>
</head>
<body>
  <header>
    <h1>I am a header</h1>
  </header>
  <article>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
    </p>
  </article>
  <footer>
    <h4>I am a footer</h4>
  </footer>
</body>
</html>

Cela fonctionne sur tous les navigateurs modernes (FF4+, Chrome, Safari, IE8 et IE9+).

Répondu el 19 de Août, 2011 par Jeremy Karlsson (333 Points )

Answer 3

7voto

arnaud576875 Points 35281

Voici comment procéder :

L'en-tête et le pied de page ont une hauteur de 30px.

Le pied de page est collé au bas de la page.

HTML :

<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

CSS :

#header {
    height: 30px;
}
#footer {
    height: 30px;
    position: absolute;
    bottom: 0;
}
body {
    height: 100%;
    margin-bottom: 30px;
}

Essayez-le sur jsfiddle : http://jsfiddle.net/Usbuw/

Répondu el 19 de Août, 2011 par arnaud576875 (35281 Points )

Answer 4

3voto

acme Points 5109

Après avoir bricolé un peu, j'ai trouvé une solution qui fonctionne dans >IE7, Chrome, Firefox :

http://jsfiddle.net/xfXaw/

* {
    margin:0;
    padding:0;
}

html, body {
    height:100%;
}

#wrap {
    min-height:100%;

}

#header {
    background: red;
}

#content {
    padding-bottom: 50px;
}

#footer {
    height:50px;
    margin-top:-50px;
    background: green;
}

HTML :

<div id="wrap">
    <div id="header">header</div>
    <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div>
</div>
<div id="footer">footer</div>

Répondu el 18 de Octobre, 2013 par acme (5109 Points )

Answer 5

3voto

Anand Points 173

Essayez ceci

<!DOCTYPE html>

<html>

<head>

<title>Sticky Header and Footer</title>

<style type="text/css">

/* Reset body padding and margins */

body {
    margin:0;

    padding:0;
}

/* Make Header Sticky */

#header_container {

    background:#eee;

    border:1px solid #666;

    height:60px;

    left:0;

    position:fixed;

    width:100%;

    top:0;
}

#header {

    line-height:60px;

    margin:0 auto;

    width:940px;

    text-align:center;
}

/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/

#container {

    margin:0 auto;

    overflow:auto;

    padding:80px 0;

    width:940px;

}

#content {

}

/* Make Footer Sticky */

#footer_container {

    background:#eee;

    border:1px solid #666;

    bottom:0;

    height:60px;

    left:0;

    position:fixed;

    width:100%;
}

#footer {

    line-height:60px;

    margin:0 auto;

    width:940px;

    text-align:center;

}

</style>

</head>

<body>

<!-- BEGIN: Sticky Header -->
<div id="header_container">

    <div id="header">
        Header Content
    </div>

</div>
<!-- END: Sticky Header -->

<!-- BEGIN: Page Content -->
<div id="container">

    <div id="content">

            content
        <br /><br />
            blah blah blah..
        ...
    </div>

</div>
<!-- END: Page Content -->

<!-- BEGIN: Sticky Footer -->
<div id="footer_container">

    <div id="footer">

        Footer Content

    </div>

</div>

<!-- END: Sticky Footer -->

</body>

</html>

Répondu el 24 de Octobre, 2013 par Anand (173 Points )

Answer 6

1voto

Jelo Kokhodze Points 11

Avec grille

<div class='container'>
 <header>header</header>
 <div>content</div>
 <footer>footer</footer>
</div>

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

Répondu el 21 de Octobre, 2021 par Jelo Kokhodze (11 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: