0
votes

Les enfants ne s'étirent pas à la hauteur avec Flexbox

im essayant d'utiliser Flexbox sur ma page. Je heurte un problème très facile (je suppose). J'ai commencé avec un pied de page en-tête et 3 sections. L'en-tête et les pieds de page doivent être à 100% de largeur et de hauteur dépend du texte de l'en-tête et du pied de page lui-même.

La section d'autre part doit être la hauteur et la largeur restantes de 100%, mais ce n'est pas le problème. J'ai résolu ceci avec flex: 1 0px; p>

J'ai téléchargé mon code sur Fiddle a un look . p> xxx pré>

<!DOCTYPE html>
<html>

<head>
  <title>Samir Alieev - Challenge 1</title>
  <link rel="stylesheet" href="index.css" type="text/css" />
</head>

<body>
  <section id="container">
    <header>
      Welkom op de dashboard van de ruimteschip ITS. Hierin kunt u alle benodigde informatie vinden wat betreft de ruimteschip en het reis naar Mars. Een fijne reis toegewenst!
    </header>
    <section id="informatie">
      Voertuig informatie
    </section>
    <section id="omgeving">
      Voertuig omgeving
    </section>
    <section id="voorraden">
      Voorraden
    </section>
    <footer>
      Footer
    </footer>
  </section>
</body>

</html>

html flexbox

2 commentaires

Un peu clair pour moi ici, qu'essayez-vous d'atteindre?

J'ai édité ma question avec un aperçu de ce que j'essaie d'atteindre

3 Réponses :

0
votes

Vous avez besoin de définir la section de style qui prend toutes les pages et vous avez besoin de footer de style définissant sur la page inférieure. JSFIDDLE

#idcontainer{
    position: absolute;
    left: 0;
    top: 0;
    WIDTH: 100%;
    HEIGHT: 100%;
}
footer{
position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

4 commentaires

Est-il vraiment nécessairement d'utiliser la position dans ce cas? Je pensais qu'il y avait d'autres solutions juste avec Flexbox

Vous devriez également envisager si le site doit fonctionner dans tout le site de la version ... Si vous utilisez IE9, le CSS ne fonctionne pas

Il y a toujours cet énorme espace entre l'en-tête et les sections

@Mirkocianfarani tout ce que IE10 et ci-dessous n'est plus pris en charge par Microsoft. Nous ne devrions-nous pas non plus.

0
votes

D'abord, j'ai créé un div avec la classe FlexContainer. Ensuite, j'ai donné les articles Flex: 1

<body>
    <header>

    </header>
    <main>
        <div class="flexcontainer">
            <div>flex item 1</div>
            <div>flex item 2</div>
            <div>flex item 3</div>
      </div>
    </main>
    <footer>Footer</footer>
</body>

body {
    margin: 0;
}

.flexcontainer{
    display: flex;
}

.flexcontainer div{
    flex: 1;
    text-align: center;
    margin: 1em;
}

0 commentaires

1
votes

Vous allez vouloir envelopper vos sections dans un autre élément, mais une fois que vous avez fait cela, il est assez facile de faire:

<article id="container">
  <header>
    Welkom op de dashboard van de ruimteschip ITS. Hierin kunt u alle benodigde informatie vinden wat betreft de ruimteschip en het reis naar Mars. Een fijne reis toegewenst!
  </header>
  <main>
    <section id="informatie">
      Voertuig informatie
    </section>
    <section id="omgeving">
      Voertuig omgeving
    </section>
    <section id="voorraden">
      Voorraden
    </section>
  </main>
  <footer>
    Footer
  </footer>
</article>

2 commentaires

C'est ce que j'essaie de réaliser en effet mais j'ai toujours 1 problème. Je reçois une barre de défilement au navigateur. Je ne veux pas cela, je veux que ce soit la page complète non plus que cela, dois-je ajouter max-hauteur?

@Blank alors je suppose que vous avez quelque chose d'extra qui n'est pas dans mon exemple, ce qui cause cela. Quelle est la taille de la barre de défilement? Je suppose que cela peut être causé par la marge et / ou le rembourrage sur un élément qui fait partie de l'arbre à 100% de hauteur.