html - CSS 帮助 - 随着屏幕变小，响应式 2 列变为单列

Question

我不经常发帖，但我一直在做大量的搜索（和学习），但仍然不知道如何解决我想要做的事情。

我创建了一个 jsfiddle，它几乎显示了我遇到的问题：https ://jsfiddle.net/3pt2ks67/

我想做什么（参考 JSFiddle）：

• 我有左/右列的响应式 CSS，但是当屏幕尺寸低于 600 像素时，左右堆叠（这似乎在大多数情况下都有效）
• 当前问题：左侧，绿色，我希望背景颜色的高度与右列相匹配。右栏总是更长，但高度不同
• 当前问题：您会看到在左/右模式下（实际上也是堆叠式），左+右列略小于“部分标题”（红色）-我希望它们具有相同的宽度（页面宽度的 90%全部的）
• 当前问题：页脚一直到章节标题，我希望它在右列高度之后有一个空格 - 当左/右堆叠时这似乎是正确的

.body {
  background-color: black;
}

.header,
.footer {
  background-color: blue;
  width: 100%;

}

.space {
  height: 10px;
}

.dropdown {
  width: 90%;
  background-color: yellow;
  margin: auto;
  padding: 5px;
}

.title {
  width: 90%;
  background-color: red;
  margin: auto;
  padding: 5px;
}

.wrapper {
  width: 90%;
  margin: auto;
}

.left {
  width: 30%;
  float: left;
  height: 100%;
  background-color: green;
}

.right {
  width: 70%;
  float: left;
  height: 100%;
  background-color: lightblue;
}

@media screen and (max-width: 600px) {
  .left {
    float: none;
    width: 100%;
  }

  .right {
    float: none;
    width: 100%;
  }

}

<div class="body">
  <div class="header">Header Menu</div>
  <div class="space"></div>
  <div class="dropdown">Drop Down Selection</div>
  <div class="space"></div>
  <div class="title">Section Title</div>

  <div class="wrapper">
    <div class="left">This has a picture</div>
    <div class="right">This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words</div>
  </div>

  <div class="space"></div>
  <div class="footer">Footer Menu</div>
</div>

我认为这是我在这里的第二篇文章，因为我通常可以弄清楚，但我正在寻求比我更好的人的帮助。任何帮助表示赞赏。谢谢你！

标签： htmlcssresponsive

Answer 1

在这里，让我知道这是否是您想要的：

.body {
  background-color: black;
  position: relative;
  width: 100%;
  height: 100%;
}

.header,
.footer {
  background-color: blue;
  width: 100%;

}


.space {
  height: 10px;
}

.dropdown {
  width: 90%;
  background-color: yellow;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 5px;
}

.title {
  width: 90%;
  background-color: red;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 5px;
}

.wrapper {
  width: 90%;
  margin: auto;
  height: auto;
  display: flex;
}

.left {
  width: 30%;
  background-color: green;
}

.right {
  width: 70%;
  background-color: lightblue;
}

@media screen and (max-width: 600px) {
  .left {
    float: none;
    width: 100%;
  }

  .right {
    float: none;
    width: 100%;
  }
  
  .wrapper {
  width: 90%;
  margin: auto;
  height: auto;
  display: block;
}

}

<div class="body">
  <div class="header">Header Menu</div>
  <div class="space"></div>
  <div class="dropdown">Drop Down Selection</div>
  <div class="space"></div>
  <div class="title">Section Title</div>

  <div class="wrapper">
    <div class="left">This has a picture</div>
    <div class="right">This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words<br>This has a lot of words</div>
  </div>

  <div class="space"></div>
  <div class="footer">Footer Menu</div>
</div>