Question

我有两个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>

Answer 1

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

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

CSS

SELECT items.id, items.description, avg(ratings.value) as average
 FROM `items` 
INNER JOIN `ratings` ON `ratings`.`item_id` = `items`.`id` 
WHERE `items`.`type` IN ('Book') 
GROUP BY ratings.item_id 
ORDER BY average desc;

Output(I have not pasted the whole description, since it is too long to fit):
    +-----+----------------------------+---------+
    | id  | description                | average |
    +-----+----------------------------+---------+
    | 241 | Into the intrigue and vio  |  3.0000 |
    | 242 | Teams can be a driving fo  |  2.0000 |
    | 243 | NULL                       |  5.0000 |
    | 244 | In Temptations of the Wes  |  1.0000 |
    | 245 | NULL                       |  4.0000 |
    +-----+----------------------------+---------+

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

1 个答案: