如果在响应式布局中高于主块，如何垂直滚动div？答案

【问题标题】：How to scroll vertically aside div if higher than main block in responsive layout?如果在响应式布局中高于主块，如何垂直滚动div？
【发布时间】：2016-12-18 20:11:12
【问题描述】：

我有两个 div，排成一排，并排。第二个是主要的，更重要。我希望该行不高于主行。因此，当第一个 div 的内容太高时，应该隐藏或滚动溢出的内容。看看下面的代码。如何用css制作？

重要提示：我的布局是响应式的，所以我正在寻找没有固定高度的解决方案。

<style>
.wrap {border: 5px solid green}
.aside {display: inline-block; width: 25%; font-size: 300%; vertical-align: top; background-color: yellow; }
.main {display: inline-block; width: 75%; font-size: 300%; background-color: red; padding-bottom: 56%; vertical-align: top}

</style>

<div class="wrap">
  <div class="aside">
  I want this block to be scrolled vertically if height is greater than Main Block's height.<br>
  The height of "wrap" block should be the same like Main Block's height.
  <Br><br>
    long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text
  </div><div class="main"> Main Block </div>
</div>

【问题讨论】：

很可能您不会有一些 javascript/jquery 来执行此操作，这可能仅使用 css 无法完成...您可以在 javascript 下标记此问题以便快速响应。
嗯，用javascript很容易，我正在寻找纯css解决方案

标签： css responsive-design height

【解决方案1】：

我认为您需要添加一些 JavaScript 以获得最佳结果。但是你可以在没有 JavaScript 的情况下尝试以下代码：

<div class="wrap">
  <div class="aside">
  I want this block to be scrolled vertically if height is greater than Main Block's height.<br>
  The height of "wrap" block should be the same like Main Block's height.
  <Br><br>
    long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text
  </div><div class="main"> Main Block </div>
</div>

CSS

.wrap {
  border: 5px solid green
}

.aside {
  display: inline-block;
  width: 25%;
  font-size: 300%;
  background-color: yellow;
  height: 100vh;
  float: left;
  overflow-y: scroll;

}

.main {
  display: inline-block;
  width: 75%;
  font-size: 300%;
  background-color: red;
  height: 100vh;
}

【讨论】：