javascript - 仅使一部分可滚动而不是整个站点

Question

所以我有这段 php 代码，基本上可以在我的网站上加载我的东西:

<div id="main_content">
    <div id="content">
      <?php
       include "content/home.php";
      ?>
    </div>
  </div>

然后我有我的 SCSS 代码:

#main_content{
  float: left;
  z-index: 50;
  margin-top: $header_hight;
  background-color: black;

  #content{

  }
}

还有我的 JS 代码(因为 main_content 只是网站的一部分):

function main_content_height_change() {
  let main_content=$("#main_content"),
      main_content_height=$(window).height()-$("#main_topbar").height()
  //console.log($(window).height()+":"+$("#main_topbar").height()+":"+main_content_height)
  $(main_content).css({
    "height":main_content_height+"px"
  })
}

所以我有点用这段代码得到了我想要的东西，但它没有正确设置 main_content 的高度。它总是和其中的内容一样高，但我想让其中的内容可滚动而不是容器(这样就不会移动整个页面)

有人知道我哪里想错了吗？

感谢您的帮助:)

Answer 1

添加max-height: <height>px;overflow-y: auto至 #main_content

如果您的 div 超过最大高度，它将是可滚动的。