How to use the full page only without body scrollbar

Question

I'm trying to build a page where all content is fitted in the full width and height of the user's device, regardless of the amount of content.

The thing I'm struggling with is setting up the height of the div#content in CSS. On smaller devices, #content will be less high, and on big devices it will be higher.

Here's an image, this is the goal I'm aiming for:

Also made the page in Codepen:
https://codepen.io/creativeresul/full/JVGQRe

    #content {
      background: white;
      padding: 15px;
      height: 100%;
      overflow-y: scroll;
    }

*"Also made the page in Codepen"* Please put your [mcve] **in** the question here on-site using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/)), not off-site. People shouldn't have to go off-site to help you. — T.J. Crowder, Apr 04 '19 at 15:24

golddragon007 · Answer 1 · 2019-04-04T15:42:52.080

Set for every container the height, except the #content and #content-container. If you don't want scroll in that case, when the text doesn't require it, then simply use overflow-y: auto; which is the default. If you know all the exact heights (no max and min height) then you can do this:

#content {
  height: calc(100% - all other container in px or % or whatever);
}

If you set the height: 100% that means the full window height (usually, because it's relative I think), this is why you can scroll even if you don't have content there.

And here you can find a lot of way, how to fill up the remaining place: Make a div fill the height of the remaining screen space

score 0 · Answer 2 · answered Apr 04 '19 at 15:39

The CSS answer is better because doesn't require another dependency but will only work on browsers that support CSS3 but these days it isn't really an issue but if you want to go the JavaScript route and can stand to add JQuery then the following script will work

$(window).resize(function(){
  var el = $('#content-container');
  var footer = $('footer');
  el.height(footer.offset().top - el.offset().top);
});

This solution has it's caveats too because it might lag a bit with excessive resizing.

You can get JQuery from the cloudfare CDN here: https://cdnjs.com/libraries/jquery/

score 0 · Answer 3 · answered Apr 04 '19 at 15:43

You might want to use vh and vw units instead of px (https://www.w3schools.com/cssref/css_units.asp).

But note that 100 vh has some issues, typically being too tall for the user to see all of your content (because the browser controls at the top of the screen will take up some of the vertical space, and possibly causing other UX concerns). See this issue: CSS3 100vh not constant in mobile browser

A possible solution is to set your container height according to https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight, as noted in some of the responses in the above SO question, after which any descendant elements can be styled using % units.

score 0 · Answer 4 · answered Apr 04 '19 at 15:54

You can apply custom height to your page sections.

Please refer snippet.

#top{

  background-color: antiquewhite;
  height:50vh;
}


#mid{

  background-color: #eee;
  height:30vh;
  overflow-y:scroll;
}


#bottom{

  background-color: #bbc;
  height:20vh;
}

<div id="top"></div>

<div id="mid">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies metus ut urna mollis, at efficitur magna iaculis. Suspendisse posuere malesuada sem at imperdiet. Morbi eget consectetur metus, id tempor magna. Nullam mauris ipsum, dapibus quis maximus id, porttitor non diam. Donec tempor mauris cursus urna efficitur, in vulputate velit sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies metus ut urna mollis, at efficitur magna iaculis. Suspendisse posuere malesuada sem at imperdiet. Morbi eget consectetur metus, id tempor magna. Nullam mauris ipsum, dapibus quis maximus id, porttitor non diam. Donec tempor mauris cursus urna efficitur, in vulputate velit sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies metus ut urna mollis, at efficitur magna iaculis. Suspendisse posuere malesuada sem at imperdiet. Morbi eget consectetur metus, id tempor magna. Nullam mauris ipsum, dapibus quis maximus id, porttitor non diam. Donec tempor mauris cursus urna efficitur, in vulputate velit sodales.




</div>


<div id="bottom"></div>

How to use the full page only without body scrollbar

4 Answers4