дети не растягиваются по высоте с помощью flexbox

Я пытаюсь использовать flexbox на своей странице. Я столкнулся с очень простой (я думаю) проблемой. Я начал с нижнего колонтитула и трех разделов. Верхний и нижний колонтитулы должны иметь ширину 100%, а высота зависит от текста в самом верхнем и нижнем колонтитуле.

Раздел, с другой стороны, должен иметь оставшиеся 100% высоты и ширины, но это не проблема. Я исправил это с помощью flex: 1 0px;

Я загрузил свой код на Fiddle, посмотрите.

 section {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    align-content: stretch;
  }


html,
body {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
}

header {
  text-align: center;
}

footer {
  text-align: center;
}


/* MEDIA QUERYS */


/*
  ## Desktops
  ## Schermgrootte = 1281px of hoger
*/

@media (min-width: 1281px) {
  #container {
    background-color: #eee;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
  }
  #container>* {
    flex: 1 100%;
  }
  section {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    align-content: stretch;
  }
  header {
    align-self: flex-start;
    background: green;
  }
  footer {
    align-self: flex-start;
    background: gray;
  }
  #informatie {
    background-color: red;
    color: white;
    flex: 1 0px;
  }
  #omgeving {
    background-color: blue;
    color: white;
    flex: 1 0px;
  }
  #voorraden {
    background-color: yellow;
    flex: 1 0px;
  }
}


/*
  ## Laptops
  ## Schermgrootte = 961px tot 1280px
*/

@media (min-width: 961px) and (max-width: 1280px) {
  #container {
    background-color: #eee;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  #informatie {
    background-color: red;
    color: white;
  }
  #omgeving {
    background-color: blue;
    color: white;
  }
  #voorraden {
    background-color: yellow;
  }
}


/*
  ## Telefoons
  ## Schermgrootte = 320px tot 960px
*/

@media (min-width: 320px) and (max-width: 960px) {}
<!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>

Я попытался добавить 100% высоты в свой контейнер, все получает это свойство. Я удалил это свойство из нижнего колонтитула и верхнего колонтитула, но, как вы видите, между разделом и верхним колонтитулом есть огромный разрыв. Между нижним колонтитулом и концом страницы также есть огромный разрыв.

Я также пытался добавить этот код в разделы, но ничего не вышло. Что мне здесь не хватает?

Поскольку некоторым из вас это неясно, вот предварительный просмотр того, чего я пытаюсь достичь введите здесь описание изображения


html flexbox
person Blank    schedule 18.02.2019    source источник
comment
Непонятно мне здесь, чего вы пытаетесь достичь?   -  person Jamie Barker    schedule 18.02.2019
comment
Я отредактировал свой вопрос с предварительным просмотром того, чего я пытаюсь достичь   -  person Blank    schedule 18.02.2019

Ответы (3)


arrow_upward
1
arrow_downward

Вы захотите обернуть свои разделы в другой элемент, но как только вы это сделаете, это будет довольно легко сделать:

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

main {
  flex: 1 0 auto;
  display: flex;
}

main section {
  flex: 1 0 0px;
}

/* Just colours below here */

header {
  background: green;
}

#informatie {
  background: red;
}

#omgeving {
  background: blue;
}

#voorraden {
  background: teal;
}

footer {
  background: orange;
}
<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>

Просто установите для родительского контейнера формат столбца с «основным» для гибкого роста, а затем установите для разделов внутри него значение «flex: 1 0 0px», чтобы придать им равную ширину.

person Jamie Barker    schedule 18.02.2019
comment
Это то, чего я действительно пытаюсь достичь, но у меня все еще есть 1 проблема. Я получаю полосу прокрутки прямо в браузере. Я не хочу этого, я хочу, чтобы это была полная страница не длиннее, мне нужно добавить максимальную высоту? - person Blank; 18.02.2019
comment
@Blank Тогда я предполагаю, что у вас есть что-то дополнительное, чего нет в моем примере. Насколько велика полоса прокрутки? Я предполагаю, что это может быть вызвано полями и/или отступами на элементе, который является частью дерева высоты 100%. - person Jamie Barker; 19.02.2019

arrow_upward
0
arrow_downward

Сначала я создал div с классом flexcontainer. Затем я дал элементам 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;
}
person Oscar R    schedule 18.02.2019

arrow_upward
0
arrow_downward

Вам нужно установить раздел стиля, который занимает всю страницу, и вам нужно установить нижний колонтитул стиля, который находится на нижней странице. jsfiddle

#idcontainer{
    position: absolute;
    left: 0;
    top: 0;
    WIDTH: 100%;
    HEIGHT: 100%;
}
footer{
position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
person Mirko Cianfarani    schedule 18.02.2019
comment
действительно ли обязательно использовать position в этом случае? Я думал, что есть другие решения только с flexbox - person Blank; 18.02.2019
comment
вам также следует подумать, должен ли сайт работать во всех версиях сайта... если вы используете IE9, css не работает - person Mirko Cianfarani; 18.02.2019
comment
Между заголовком и разделами по-прежнему существует огромный разрыв. - person Blank; 18.02.2019
comment
@MirkoCianfarani Все IE10 и ниже больше не поддерживается Microsoft. Мы тоже не должны. - person Jamie Barker; 18.02.2019