Question

顶部的红色和蓝色栏之间有一个神秘的空间。

我做错了什么？当我删除main时，栏会消失。但是footer到了顶部？

我做了一个小提琴：https://jsfiddle.net/v9yrmafw/1/#

.strip {
  height: 20px;
  background: red;
}
.bar {
  text-align: center;
  background: blue;
  color: white;
  height: 100px;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}
main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar">
      <h1>Home</h1>
    </div>
  </main>

  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>

Answer 1

这是由h1 bar h1 bar引起的 - 所以你可以：

将bar
向.strip { height: 20px; background: red; } .bar { text-align: center; background: blue; color: white; height: 100px; padding: 10px; } .container { display: flex; flex-direction: column; height: 100vh; } .footer { margin-top: auto; } .footer__body { display: flex; align-items: center; justify-content: center; height: 70px; background: yellow; color: white; } main { flex-grow: 1; flex-shrink: 0; flex-basis: auto; }

请参阅下面的演示 - 我已向<div class="container"> <main> <div class="strip"></div> <div class="bar"> <h1>Home</h1> </div> </main> <footer> <div class="footer"> <div class="footer__body"> <p>© {{ copyright }} {{ now }}</p> </div> </div> </footer> </div>添加了一些填充：

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

Answer 2

问题的根源是保证金折叠，如@Kukkuz' answer所述。

除了该答案中提到的两个解决方案 - 更改margin或添加border / padding - 两者都会禁用边距折叠，还有第三个：< em>使父级成为弹性容器

将此添加到您的代码中：

.bar {
    display: flex;
}

在 flex格式设置上下文 中，边距不会崩溃。

来自规范：

3. Flex Containers: the flex and inline-flex display values

Flex容器为其创建一个新的flex格式化上下文   内容。

这与建立块格式化上下文相同，除了   使用flex布局而不是块布局。

例如，浮动不会侵入弹性容器，而且   flex容器的边距不会因其边缘而崩溃   内容。

revised fiddle

＆＃13;

.bar {
    text-align: center;
    background: blue;
    color: white;
    height: 100px;
    display: flex; /* NEW */
    justify-content: center; /* NEW */
}
.strip {
    height: 20px;
    background: red;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}  
.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}
main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

＆＃13;

<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar">
      <h1>Home</h1>
    </div>
  </main>
  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>

＆＃13;

Answer 3

试试h1

＆＃13;

.strip {
    height: 20px;
    background: red;
    
  }
  
.bar {
    text-align: center;
    background: blue;
    color: white;
    height: 100px;
   
  }
  
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  
}  

.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  
  
}

＆＃13;

<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar"><h1 style=" padding:0px;
    margin:0px;">Home</h1></div>
  </main>
  
  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>

＆＃13;

flexbox中元素之间的未知差距

3 个答案: