【问题标题】:Make a div fill the remaining vertical space in a column using display: flex使用 display: flex 使 div 填充列中剩余的垂直空间
【发布时间】:2015-02-03 02:43:33
【问题描述】:

如何使用display: flex 使 div 填充剩余的垂直空间?

在下面的示例中,main 元素应填满导航未使用的所有空间。如果这工作正常,我们就不会看到任何红色。

http://jsfiddle.net/36r3mL36/

HTML:

<nav></nav>
<main></main>

CSS:

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}

nav {
    height: 40px;
    background: orange;
}

main {
    display: flex;
    flex: 1;
    background: purple;
}

【问题讨论】:

    标签: css layout flexbox


    【解决方案1】:

    尝试在body 选择器旁边添加html

    html, body {
        height: 100%;
        display: flex;
        flex-direction: column;
        background: red;
        margin: 0;
    }
    

    但是,我建议将 flex 东西放在容器中。

    html, body, .container {
        height: 100%;
        margin: 0;
    }
    
    .container {
        display: flex;
        flex-direction: column;
        background: red;
    }
    
    nav {
        height: 40px;
        background: orange;
    }
    
    main {
        display: flex;
        flex: 1;
        background: purple;
    }
    <div class="container">
      <nav></nav>
      <main></main>
    </div>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-03-12
      • 1970-01-01
      • 2014-06-16
      • 1970-01-01
      • 2015-09-06
      相关资源
      最近更新 更多