CSS 导航 - 没有 flex 的方式

Question

如果没有display: flex; 和flex: 1 0 0;，此示例是否低于realizable？

如何将.navigation 的高度设置为 100% 但自动减去 SignOut 的高度？我试过 calc(100% - SignOutHeight) 但 SignOutHeight 可以是动态的...只有 flex 模型提供此选项或存在不同的方式？

jsfiddle

https://jsfiddle.net/Lny303nh/3/

    body {
      margin: 0;
    }

    * {
      box-sizing: border-box;
    }

    .experiment {
      background: #f00;
      display: flex;
      flex-direction: column;
      height: 100%;
      padding-bottom: 16px;
      padding-top: 16px;
      position: fixed;
      width: 320px;
    }
    
    .navigation {
      flex: 1 0 0;
      overflow: auto;
    }
    
    .navigation__links {
      padding-left: 16px;
      padding-right: 16px;
    }
    
    .navigation__link {
      background: #f00;
      color: #fff;
      padding: 16px;
    }
    
    .navigation__link_active {
      background: #fff;
      color: #000;
    }

    <div class="experiment">
      <div class="navigation">
        <div class="navigation__links">
          <div class="navigation__link">
            Name
          </div>
          <div class="navigation__link">
            Sign In
          </div>
          <div class="navigation__link navigation__link_active">
            Sign Up
          </div>
        </div>
      </div>
    
      <div class="navigation__links">
        <div class="navigation__link">
          Sign Out
        </div>
      </div>
    </div>

Answer 1

这是一个根据要求使用 CSS 浮动的示例，使用 % 宽度，因此它是响应式的。如果您希望它们像图像中那样垂直，只需删除浮动：left;

.navSection {
    float: left;
    width: 20%;
}
.navSection:nth-child(odd) {
    background-color: red;
}
.navSection:nth-child(even) {
    background-color: blue;
}

 

<p class="navSection">Section 1</p>
<p class="navSection">Section 2</p>
<p class="navSection">Section 3</p>
<p class="navSection">Section 4</p>
<p class="navSection">Section 5</p>