调整浏览器大小时，将右栏移至左侧固定侧边栏下方

Question

我在左侧有一个固定的侧边栏，在右侧的列中有几张垂直对齐的卡片。如何在调整大小时使右侧栏落在侧边栏下方，以便侧边栏成为顶部栏，高度约为视口高度的 50%？

我想保持当前间距的比例并让内容保持垂直对齐。还试图使侧边栏在调整大小时不再固定。

这是 fiddle：https://jsfiddle.net/snacks00/wLd67f1t/

body {
  margin: 0;
}

.sidebar {
  width: 40%;
  height: 100vh;
  text-align: center;
  position: fixed;
  background-color: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.right-column {
  width: 60%;
  display: inline-block;
  height: 100%;
  margin-left: 40%;
  background-color: #F9F9F9;
}

.card {
  display: flex;
  border-radius: 4px;
  padding: 10%;
  margin: 10%;
  background-color: #fff;
  -moz-box-shadow: 0px 1px 5px #d3d3d3;
  -webkit-box-shadow: 0px 1px 5px #d3d3d3;
}

@media (max-height: 45em) {
  .sidebar {
  height:500px;
    display: inline-block;
    position: fixed;
    float: left;
    }


}

<!DOCTYPE html>
<html lang="en">
<body>


  <div class="sidebar">
    <h2>Sidebar</h2>
  </div>

 <div class="right-column">
    <div class="content" id="1">
      <div class="card">
      <p>Card number 1</p> </div> 
    </div>

    <div class="content" id="2">
      <div class="card">
      <p>Card number 2</p> </div> 
    </div>

      <div class="content" id="3">
      <div class="card">
      <p>Card number 3</p> </div> 
    </div>

    <div class="content" id="4">
      <div class="card">
      <p>Card number 4</p> </div> 
    </div>
  </div>

  </body>
</html>

Answer 1

您应该首先考虑在媒体查询中将边栏的 position 设置为 static。否则，它会翻牌。

为了让卡片在移动模式下位于侧边栏下方，我会将所有内容放在一个 flexbox 容器中，并将 flex-wrap 属性设置为 wrap：如果一行中没有足够的space，它将允许项目换行。

您也可以使用 bootstrap grid system。希望对您有所帮助！

调整浏览器大小时，将右栏移至左侧固定侧边栏下方

Move right column below the fixed sidebar on the left when resizing browser

html

css

flexbox

responsive