全高度flexbox,随内容增长

时间:2015-10-24 21:54:26

标签: html css css3 flexbox

我有一个基本的两列flexbox布局(侧面菜单,标题,主要内容)。

我希望我的侧边菜单有一个固定的宽度,但高度增加到整个页面的100%。对于我的主要内容,有一个固定的高度标题和一个动态高度内容窗格,我希望该窗格的背景也填充100%的可用高度。

  • 如果屏幕的高度足够高,可以包含所有内容,那么一切都很棒
  • 如果屏幕的高度不能包含所有内容(例如:需要滚动),则1)菜单的背景仅下降到原始视口的底部; 2)主要内容的背景较低[但仍然不是全高],因为标题推了一下。

当主要内容超出可用高度并需要滚动时,背景不会一直延伸到页面

查看黑色,灰色和控制台窗口之间的交叉点...左侧黑色bg是带静态内容的菜单,右侧灰色bg是内容增长的主要内容,后两个图像中的底部白色bg是wtf?

  1. 加载数据之前,根本不向下滚动
  2. 加载数据之前,向下滚动到页面末尾
  3. 加载数据后,向下滚动到页面末尾
  4. 我无法判断高度是否100%附加到html,body实际上正在做任何事情,因为删除它们不会改变行为,仍然与下面的屏幕截图相同。

    preload prescroll

    preload postscroll

    postload postscroll

    请参阅小提琴here

    .flex-row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
    
    .flex-row.flex-fill {
      height: 100%;
    }
    
    .flex-col {
      display: flex;
      flex-direction: column;
      flex-flow: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
    
    .flex-col.flex-fill {
      width: 100%;
    }
    
    .flex-right {
      margin-left: auto;
    }
    
    .menu {
      width: 200px;
      background-color: blue;
      color: $white;
      padding: 15px;
      height: 100%;
      flex-grow: 1;
    }
    
    .header {
      background-color: red;
      padding: 15px;
      font-family: italic;
      font-size: 1.5em;
    }
    
    .main-content {
      background-color: green;
      height: 100%;
      flex-grow: 1;
      padding-bottom: 30px;
    }
    <div class="flex-row flex-fill">
      <div class="flex-col">
        <div class="menu">
          <ul>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
          </ul>
        </div>
      </div>
    
      <div class="flex-col flex-fill">
        <div class="header">header</div>
        <div class="main-content">main content</div>
      </div>
    </div>

1 个答案:

答案 0 :(得分:7)

导致问题的原因有两个:

首先,flex容器上的height: 100%不起作用,因为有no height specified on the parent element。该问题已通过html, body { height: 100%; }解决。

其次,Flex容器上的相同height: 100%将背景的高度限制为固定的100%。通过切换到最小高度,背景可以随内容一起扩展。

* { box-sizing: border-box; }

html { height: 100%; }

body {  
    min-height: 100%;
    display: flex;
    margin: 0;
    padding: 0; 
}

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
}

revised fiddle