CODEWITHSUNDEEP
javascriptphpjquerycsssass
user7901228
user7901228

Reputation:

Make only a part scrollable not the whole site

So I have this php code which basically loads my stuff in my site:

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

Then I have my SCSS Code:

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

  #content{

  }
}

And my JS Code (Because the main_content is only a part of the site):

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"
  })
}

So I kinda get what I want with this code, but it doesnt set my height for the main_content right. It is always as high as the content that is in it, but I want to make the content in it scrollable and not the container (So that not the whole page gets moved)

Does someone know where I am thinking wrong or sth?

Thanks for any help :)

Upvotes: 0

Views: 76

Answers (5)

myfunkyside
myfunkyside

Reputation: 3950

You need to explicitly make the #main_content scrollable,
and maybe* also explicitly make the html and body NOT scrollable:

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

*Actually, overflow:hidden for html,body is not needed if you use $("body").height() instead of $(window).height() in your JS calculation.

See the code snippet below for a demo.

$(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main_topbar">Main Topbar</div>
<div id="main_content">
  <div id="content">
    Bla sdlkkgj sa;lkfjj a;lkgj a;lkgj ja;lkg jal;kg jdlgkjd lgkjdf lgjhdfjhdgfb mfnbvufhfkkhkjhgjh ggjhg <br>bla<br>bladiebla<br>Bla<br>bla<br>bladiebla<br>Bla<br>bla<br>bladiebla<br>Bla<br>bla<br>bladiebla<br>Bla<br>bla<br>bladiebla<br>Bla<br>bla<br>bladiebla<br>Bla<br>bla<br>bladiebla<br>Bla<br>bla<br>bladiebla<br>Bla<br>bla<br>bladiebla
  </div>
</div>

I removed some of your CSS and changed your JS a bit, because I didn't need the code for this demo, but the solution should still hold with your code added.

Upvotes: 0

user7901228
user7901228

Reputation:

https://jsfiddle.net/uhcpwuk4/

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

This fiddle did work for me and I hope that it works for everyone who might be visiting this site

Upvotes: 0

Mamallan
Mamallan

Reputation: 41

Set the height and overflow:hidden for content, only content part will have scroll not the entire page.

Eg: #content{height:50px;overflow:scroll;}

https://jsfiddle.net/jem68xqa

Upvotes: 0

Jaskaran Bindra
Jaskaran Bindra

Reputation: 3

Make rest of the elements in your viewport as position: fixed.

Then, set your scrolling part as Overflow: scroll.

This would ensure that nothing other than your scrolling part of the page scrolls.

Upvotes: 0

Kaenn
Kaenn

Reputation: 76

Add max-height: <height>px;overflow-y: auto to #main_content

If your div exceed the max height, it will be scrollable.

Upvotes: 1

Related Questions