仅使用 CSS 将元素堆叠在 2 个响应列中

Question

了解我想要实现的目标的最简单方法是在附图中。

基本上，我想创建一个响应式布局，其中包含一个部分中的 3 个元素 - 页眉、正文和页脚。在较小的屏幕（即移动设备）上，这 3 个元素可以按照您的预期简单堆叠。

但是，在较大的桌面屏幕上，我希望元素分成 2 列 - 左侧的页眉和页脚，右侧的正文。

问题是我实际上不确定我是否可以单独使用 CSS 创建这种行为。

我能做到的最好结果是让页脚元素与正文元素的底部保持一致，如下图所示（我明白为什么，我只是想找出解决方法。）

我尝试了一些使用浮动元素的方法，以及弹性盒解决方案和排序，但没有成功。我什至尝试了一些网格的东西，虽然我对网格的了解不是很好，所以我可能错过了一些东西。

我知道我可以使用 JS 来做一些事情，例如在单个父元素中移动页眉和页脚，或者再次退出，具体取决于屏幕大小。但我希望有一种纯 CSS 的方式来实现这一点，因为这看起来不太优雅。

提前感谢您的任何建议！

Answer 1

使用css-grid和`grid-template-areas" 来定义特定部分的位置，如下例所示。要允许正文部分比页眉和页脚延伸得更远，您只需要使用3 行。

body {
  display: grid;
  margin: 0;
  padding: 20px;
  grid-gap: 20px;
}

section {
  background-color: red;
  color: white;
  padding: 10px;
}

#header {
  grid-area: header;
}

#body {
  grid-area: body;
}

#footer {
  grid-area: footer;
}

@media only screen
  and (max-width: 480px) {
    body {
      grid-template-areas:
        "header"
        "body"
        "footer";
    }
}

@media only screen 
  and (min-width: 481px) {
    body {
      grid-template-areas:
        "header body"
        "footer body"
        ". body";
      grid-template-columns: 4fr 6fr;
    }
}

/* for styling purpose only */

#body {
  min-height: 70vh;
}

<section id=header>Header</section>
<section id=body>Body</section>
<section id=footer>Footer</section>

Answer 2

我已经使用 CSS Grid 来实现这一点，我知道你已经在移动版中实现了，所以我只是分享桌面版的演示代码。 CSS Grid 真的很强大，你可以在几分钟内创建复杂的布局。

.outer{display: grid; grid-template-areas: 'header body' 'footer body' 'footer body';
    }
.header{width: 100%; grid-area: header; height: 50vh; background-color: yellow;} 
.body{grid-area: body; background-color: red; }
.footer{grid-area: footer; height: 50vh; background-color: violet;}

<div class='outer'>
<div class='header'> HEADER</div>
<div class='body'> body</div>
<div class='footer'> Footer</div>
</div>

Answer 3

使用 div 的宽度和高度为零且边距为负数的 div 可以实现结果。

紫色是一个显示 flex 的 div 和一个打开 flex wrap 的正常方向。橙色是页脚。它有一个负边距，等于身体高度加上。黄色的东西是一个宽度和高度为0的div，底部边距等于它的身体高度。当页面足够宽时，body 和 Yellowdiv 都移到一边，并且页脚的负边距使其上升到刚好低于底部的页眉是浏览器版本，黄色方块在那里指示填充 div 的位置。

Answer 4

我知道我们在 2021 年，但旧的简单花车可以用于这项任务

@media (min-width: 480px) {
  div {
     display: flow-root;
     border: 1px #ccc dashed;
  }   
   
  header, footer { 
     width: 40%; 
     float: left;
  }
  
  main { 
     float: right; 
     width: calc(60% - 10px); 
  }  
   
}

div > * {
   box-sizing: border-box;
   color: #fff;
   background: #eb0022;
   padding: 10px;
   margin-bottom: 10px;
}

<div>
   <header>header</header>
   
   <main>
      
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos tempore doloremque, illum praesentium atque cumque nulla, dolorum obcaecati quod recusandae itaque pariatur unde soluta blanditiis repudiandae perspiciatis deserunt fuga commodi.</p>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos tempore doloremque, illum praesentium atque cumque nulla, dolorum obcaecati quod recusandae itaque pariatur unde soluta blanditiis repudiandae perspiciatis deserunt fuga commodi.</p>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos tempore doloremque, illum praesentium atque cumque nulla, dolorum obcaecati quod recusandae itaque pariatur unde soluta blanditiis repudiandae perspiciatis deserunt fuga commodi.</p>
      
   </main>
   
   <footer>footer</footer>
</div>