时间戳

首页 > 解决方案 > 添加/删除组件时某些 div 的 Flexbox 对齐“问题”

html - 添加/删除组件时某些 div 的 Flexbox 对齐“问题”

问题描述

我无法将其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

标签： htmlcssflexbox

解决方案

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

使用一个方向设置为 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>

推荐阅读