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

Question

我不 post 经常，但我一直在进行大量的搜索（和学习），但仍然无法弄清楚如何解决我正在尝试做的事情。

我创建了一个 jsfiddle，几乎可以说明我遇到的问题：https://jsfiddle.net/3pt2ks67/

我想做什么（参考 JSFiddle）：

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

.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>

我想这是我第二次 post 来这里，因为我通常都能弄明白，但我正在寻求那些比我强得多的人的帮助。任何帮助表示赞赏。谢谢！

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>

Answer 2

您也可以使用 flexbox 来获得您想要的结果。因此，请尝试使用 flexbox 属性使您的 left/right 列以相同的高度左右显示。

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 0;
}

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

}

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

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

.footer {
  position: fixed;
  bottom: 0;
}

@media screen and (max-width: 600px) {
  .wrapper {
    width: 90%;
    margin: auto;
    display: block;
    
  }
  
  .left {        
    width: 100%;
    background-color: green;
  }
  
  .right {
    width: 100%;    
    background-color: lightblue;
  }

}

<div>
    <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>

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

CSS Help - Responsive 2 columns becoming single column as screen is smaller

html

css

responsive