Question

为什么没有具有显示风格的div：flex或height：自动将div扩展到页面底部？特别是当父div设置为高度：100％？

我提供了一个非常具体的例子来证明这一点：

for (var i = 1; i < 11; i++) {
  if (i < 4) {
    console.log("Your number is between 1 & 3.");
  } else if (i > 7) {
    console.log("Your number is between 8 & 10.");
  } else {
    console.log("Your number is between 4 & 7.");
  }
}

注意本例中的红色div。为什么不垂直填充网格？

Answer 1

我认为您的意思是红色部分应该将页面的余数设为页面本身的100％。

既然如此。

＆＃13;

* {
    -webkit-background-origin:;
    background-origin:;
    margin: 0;
}
.wrap {
    height:100vh;
}
.wrap > section {
    height:100vh;
    display:flex;
    flex-direction: column;
}
.wrap > section > section {
    background:red;
    flex:1;
}

＆＃13;

<div class="wrap">
    <section>Welcome...red div below should fill entire container
        <section>
            <header>Red Header Here...</header>
            <div>Red Body here...</div>
            <footer>Red Footer here...</footer>
        </section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit perferendis fugit, ducimus veniam voluptates debitis. Voluptas, recusandae impedit numquam obcaecati accusamus consequuntur, illo fuga ea enim quod facere, repellat tempore!</section>
</div>

＆＃13;

Answer 2

“请注意本例中的红色div。”我假设你是指this.orientGraphFactory.getNoTx().addEdge(null, userVertex1, userVertex2, "FriendOf");红色背景。

这是我的jsfiddle的分支：

http://jsfiddle.net/lbispo/3u5rkysk/

我删除了你的内联样式并添加了这个：

section

使用前一个示例中的ID和类，选择器会更简单。已将html, body, body > div, body > div > section { height: 100%; } body > div > section { display: flex; flex-direction: column; } body > div > section > section { flex: 1; background-color: red; }添加到height: 100%和html，并更改了弹性框的选择器，将body添加到弹性元素中。

希望这会有所帮助。我的第一个答案！

显示：flex或height：auto not working

2 个答案: