孩子们不使用flexbox在高度上伸展

Question

我试图在我的页面上使用flexbox。我碰到一个非常容易（我猜）的问题。我开始使用页眉页脚和3个部分。页眉和页脚需要100％宽度和高度取决于页眉和页脚本身的文本。

另一方面，该部分需要是剩余的100％高度和宽度，但这不是问题。我用flex修复了这个：1 0px;

我将我的代码上传到Fiddle have a look。

 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％的高度，一切都得到了这个属性。我从页脚和标题中删除了这个属性，但是你可以看出该节和标题之间存在巨大的差距。页脚和页面末尾之间也存在巨大差距。

我也尝试将这些代码添加到这些部分，但它没有成功。我在这里想念什么？

由于你们有些人不清楚，这里是我想要实现的预览

Answer 1

你想要将你的部分包装在另一个元素中，但是一旦你完成了它，它很容易做到：

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>

只需将父容器设置为列格式，使用“main”进行flex增长，然后将其中的部分设置为“flex：1 0 0px”，使其均匀宽度

Answer 2

首先，我使用类flexcontainer创建了一个div。然后我给了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;
}

Answer 3

您需要设置占据所有页面的样式部分，并且您需要设置底部页面上的样式页脚。 jsfiddle

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

孩子们不使用flexbox在高度上伸展

问题描述投票：0回答：3

3个回答

最新问题

孩子们不使用flexbox在高度上伸展

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3