Flexbox - 跨页脚的部分

Question

我对 CSS 布局真的很陌生，问题是我不明白为什么我的部分是一个包含 2 个 div、一个文本和一个图像的 flexBox 跨页脚，我认为它应该推动内容回来克服它。我留下了一张图片和代码..顺便说一句，我知道 CSS 有点乱，我真正的疑问是为什么图片占用页脚空间而不是向下推。非常感谢！

.header{
  padding:50px;
  background-color: #0b090a;
  text-align: center;
  height: 6rem;
  color: #fefae0;
}

.container{
  display: flex;
  background-color: #628395;
  height: 75vh;
  justify-content: space-evenly;
  align-items:inherit;
}

.nav{
  display: flex;
  background-color: #161a1d;
  flex-direction: row;
  justify-content:space-around;
  flex-wrap: wrap;
}

.nav div{
  color: #fefae0;
  padding:1rem;
  text-decoration: none;

}

.aside{
  background-color: #a4161a;
  flex:2 1 auto;
  padding: 1rem;
  order: 1
}

.aside p{
  font-family: 'Luxurious Roman', cursive;
  padding-top: 1rem;
}

.section .content {
  background-color: #fefae0;
  flex: 75%;
  padding: 1rem;
  order:0;
}

.section .shelby{
  display: flex;
  justify-content:center;
  flex: 75%;
  padding-bottom: 1rem;
  margin-bottom:1rem;
  height:450px;
  background-color: #776a19
}

.section p{
  font-family: 'Luxurious Roman', cursive;
  padding: 1rem;
}

.shelby img{
  height:350px;
  width:500px;
}

footer{
  background-color: #660708;
  border: solid 1px black;
}

<header className="header">
  <h1>Layout Testing</h1>
</header>

<nav className="nav">
  <div>This is the Navbar tho</div>
  <div> Barra de navegacion</div>
  <div>Seccion de rutas </div>
</nav>

<div className="container">
  <aside className="aside">
    <h2>Aside</h2>
    <p>
      Overview Peaky Blinders is an epic centered on a gangster family of
      Irish-Romani origin set in Birmingham, England, starting in 1919,
      several months after the end of the First World War in November
      1918. The story centres on the Peaky Blinders gang and their
      ambitious and highly cunning boss Tommy Shelby (Cillian Murphy).
    </p>
  </aside>
  <section className="section">
    <div className="content">
    <h2>Section</h2>
    <p>
      Peaky Blinders is a British period crime drama television series
      created by Steven Knight. Set in Birmingham, England, the series
      follows the exploits of the Peaky Blinders crime gang in the direct
      aftermath of the First World War. The fictional gang is loosely
      based on a real urban youth gang of the same name, who were active
      in the city from the 1890s to the early 20th century. Peaky Blinders
      features an ensemble cast, led by Cillian Murphy, Helen McCrory, and
      Paul Anderson, starring as Tommy Shelby, Elizabeth "Polly" Gray, and
      Arthur Shelby, respectively, the gang's senior members. Sam Neill,
      Iddo Goldberg, Tom Hardy, Paddy Considine, Adrien Brody, Aidan
      Gillen, Annabelle Wallis, Charlotte Riley, Sam Claflin, Stephen
      Graham, and Anya Taylor-Joy also have recurring roles at various
      times of the series. The show premiered on 12 September 2013,
      telecast on BBC Two until the fourth series, and then shifted to BBC
      One for the fifth and upcoming sixth series. The fifth series
      premiered on BBC One on 25 August 2019 and finished on 22 September
      2019. Netflix, under the deal with Weinstein Company and Endemol,
      had acquired the rights to release Peaky Blinders in the United
      States and around the world. In January 2021, it was announced that
      series six would be the last.
    </p>
    </div>
    <div className='shelby'>
    <img src="https://cloudfront-eu-central-1.images.arcpublishing.com/larazon/PG2U3V4VJVGZ3MNBJGDFGRKA3Q.jpg" alt="Thomas Shelby" />
    </div>
  </section>
</div>

<footer>
  Footer
</footer>

Answer 1

您应该使用min-height 而不是height

.container {
  display: flex;
  background-color: #628395;
  min-height: 75vh;
  justify-content: space-evenly;
  align-items: inherit;
}

Answer 2

.header{
  padding:50px;
  background-color: #0b090a;
  text-align: center;
  height: 6rem;
  color: #fefae0;
}

.container{
  display: flex;
  background-color: #628395;
  min-height: 75vh;
  justify-content: space-evenly;
  align-items:inherit;
}

.nav{
  display: flex;
  background-color: #161a1d;
  flex-direction: row;
  justify-content:space-around;
  flex-wrap: wrap;
}

.nav div{
  color: #fefae0;
  padding:1rem;
  text-decoration: none;

}

.aside{
  background-color: #a4161a;
  flex:2 1 auto;
  padding: 1rem;
  order: 1
}

.aside p{
  font-family: 'Luxurious Roman', cursive;
  padding-top: 1rem;
}

.section .content {
  background-color: #fefae0;
  flex: 75%;
  padding: 1rem;
  order:0;
}

.section .shelby{
  display: flex;
  justify-content:center;
  flex: 75%;
  padding-bottom: 1rem;
  margin-bottom:1rem;
  height:450px;
  background-color: #776a19
}

.section p{
  font-family: 'Luxurious Roman', cursive;
  padding: 1rem;
}

.shelby img{
  height:350px;
  width:500px;
}

footer{
  background-color: #660708;
  border: solid 1px black;
}

<header className="header">
  <h1>Layout Testing</h1>
</header>

<nav className="nav">
  <div>This is the Navbar tho</div>
  <div> Barra de navegacion</div>
  <div>Seccion de rutas </div>
</nav>

<div className="container">
  <aside className="aside">
    <h2>Aside</h2>
    <p>
      Overview Peaky Blinders is an epic centered on a gangster family of
      Irish-Romani origin set in Birmingham, England, starting in 1919,
      several months after the end of the First World War in November
      1918. The story centres on the Peaky Blinders gang and their
      ambitious and highly cunning boss Tommy Shelby (Cillian Murphy).
    </p>
  </aside>
  <section className="section">
    <div className="content">
    <h2>Section</h2>
    <p>
      Peaky Blinders is a British period crime drama television series
      created by Steven Knight. Set in Birmingham, England, the series
      follows the exploits of the Peaky Blinders crime gang in the direct
      aftermath of the First World War. The fictional gang is loosely
      based on a real urban youth gang of the same name, who were active
      in the city from the 1890s to the early 20th century. Peaky Blinders
      features an ensemble cast, led by Cillian Murphy, Helen McCrory, and
      Paul Anderson, starring as Tommy Shelby, Elizabeth "Polly" Gray, and
      Arthur Shelby, respectively, the gang's senior members. Sam Neill,
      Iddo Goldberg, Tom Hardy, Paddy Considine, Adrien Brody, Aidan
      Gillen, Annabelle Wallis, Charlotte Riley, Sam Claflin, Stephen
      Graham, and Anya Taylor-Joy also have recurring roles at various
      times of the series. The show premiered on 12 September 2013,
      telecast on BBC Two until the fourth series, and then shifted to BBC
      One for the fifth and upcoming sixth series. The fifth series
      premiered on BBC One on 25 August 2019 and finished on 22 September
      2019. Netflix, under the deal with Weinstein Company and Endemol,
      had acquired the rights to release Peaky Blinders in the United
      States and around the world. In January 2021, it was announced that
      series six would be the last.
    </p>
    </div>
    <div className='shelby'>
    <img src="https://cloudfront-eu-central-1.images.arcpublishing.com/larazon/PG2U3V4VJVGZ3MNBJGDFGRKA3Q.jpg" alt="Thomas Shelby" />
    </div>
  </section>
</div>

<footer>
  Footer
</footer>