html - 添加/删除组件时某些 div 的 Flexbox 对齐方式 'issues'

Question

我无法让 footer 保持在页面底部，而 subheader 正好在 header 的下方，没有空格，而我可以添加或删除中间的内容。

.wrapper {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  font-weight: bold;
  text-align: center;
}

.header {
  background: tomato;  
  
  flex-grow: 1;
  flex-basis: 100%;
  height: 40px;
  align-self: flex-start;
}

.subheader {
  background: deepskyblue;
  
  margin-bottom: auto;
  flex-grow: 1;  
  flex-basis: 100%;
  height: 60px;
  align-self: flex-start;
}

.sidebar-wrapper {
  background: gold;

  height: 100%;
  flex-grow: 1;
  flex-basis: 20%;
}

.sidebar {
  background: purple;
  
  height: 80vh;
  top: 15px;  
  position: sticky;
}

.content {
  background: hotpink;
  
  height: 100%;
  flex-grow: 1;
  flex-basis: 80%;
}

.footer {
  background: lightgreen;
  
  height: 40px;
  flex: 1 100%;
  margin-top: auto;
}

<div class="wrapper">

    <div class="header">Header</div>

    <div class="subheader">Subheader</div>

    <div class="sidebar-wrapper">
      <div class="sidebar">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
        quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
      </div>
    </div>

    <div class="content">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
        quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
        ultricies mi vitae est. Mauris placerat eleifend leo.</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
        quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
        ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>

    <div class="footer">
      Footer
    </div>

  </div>

要查看“不当行为”，只需删除“sidebar-wrapper”和“content”元素。抱歉，我找不到更简单的方法来描述我的问题。

https://stackblitz.com/edit/angular-umydqv

Answer 1

您试图用太少的包装器做太多事情。

使用一个方向设置为 column 的 flex 容器构建一个布局，顶部有一个页眉组，底部有一个页脚，中间有一个主要部分。

然后使用另一个 flex 容器来设置您的主要区域以包含侧边栏和内容。

从主要区域中删除侧边栏或内容不会以这种方式弄乱外部布局。

html,
body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: nowrap;
  font-weight: bold;
  text-align: center;
}

main {
  flex: 1 1 100%;
  display: flex;
}

.header {
  background: tomato;
  height: 40px;
}

.subheader {
  background: deepskyblue;
  height: 60px;
}

.sidebar {
  background: purple;
  flex: 1 0 40%;
}

.content {
  background: hotpink;
}

.footer {
  background: lightgreen;
  height: 40px;
}

<div class="wrapper">

  <header>
    <div class="header">Header</div>
    <div class="subheader">Subheader</div>
  </header>

  <main>

    <div class="sidebar">
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
    </div>

    <div class="content">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>

  </main>

  <div class="footer">
    Footer
  </div>

</div>