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超过最大高度，它将可滚动。

Answer 2

将视口中的其余元素设为position: fixed。

然后，将滚动部分设置为Overflow: scroll。

这将确保除了页面的滚动部分之外的任何内容都不会滚动。

Answer 3

设置高度和溢出：隐藏内容，只有内容部分会滚动而不是整个页面。

int main()

https://jsfiddle.net/jem68xqa

Answer 4

https://jsfiddle.net/uhcpwuk4/

* {
            margin: 0;
            padding: 0;
          }
          html, body {
            height: 100%;
            overflow: hidden;
          }
          #wrapper {
            height: 100%;
            width: 700px;
            overflow: auto;
          }

这个小提琴对我有用，我希望它适用于所有可能访问本网站的人

Answer 5

您需要明确地使#main_content可滚动，
也许*也明确地使html和body不可滚动：

html,body {height:100%; overflow:hidden;}
#main_content {overflow:auto;}

*实际上，如果在JS计算中使用overflow:hidden而不是html,body，则不需要$("body").height() {/ 1}}。

请参阅下面的代码段以获取演示。

$(window).height()

$(window).load(function() {
  $(window).resize(function() {
    $("#main_content").height($("body").height()-$("#main_topbar").height());
  }).resize();
});

html, body {
  height:95%; /*only for StackOverflow, should be 100%*/
}

#main_content {
  background-color: lightblue;
  overflow: auto;
}

我删除了你的一些CSS并更改了你的JS，因为我不需要这个演示的代码，但解决方案应该仍然保留你的代码。

只使一部分可滚动而不是整个网站

5 个答案: