# How can I Make my Scene Unscrollable/100% Fitting?

**URL:** <https://discourse.threejs.org/t/how-can-i-make-my-scene-unscrollable-100-fitting/62337>\
**Category:** Questions\
**Created:** [March 6, 2024, 4:58am UTC](https://discourse.threejs.org/t/how-can-i-make-my-scene-unscrollable-100-fitting/62337 "2024-03-06T04:58:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Junk\_Mail](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/junk_mail/32/45364_2.png) [@Junk\_Mail](https://discourse.threejs.org/u/Junk_Mail)\
**Post date:** [March 6, 2024, 4:58am UTC](https://discourse.threejs.org/t/how-can-i-make-my-scene-unscrollable-100-fitting/62337/1 "2024-03-06T04:58:52Z")

</div>

Just started with Three.JS about a week ago, and I’m loving it so far! I’ve just learned how to import 3d models, but there’s this issue that persists throughout all my little projects where my window will always have some part of it that’s not part of the three.JS scene, like this:

 ![Screen Shot 2024-03-05 at 8.49.29 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/e/3e670a48f0f9b7982a510327feca4246300d42d9.jpeg)

The white margin that isn’t part of the scene is annoying as it gets in the way of scrolling around with OrbitControls and is just unpleasant to look at. How could I make it so that the scene completely takes up the whole  
window?

(Here’s a [Fiddle](https://jsfiddle.net/gekbfant/) to demonstrate this)

---

<div class="post-metadata">

**Author:** ![ShoOsaka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shoosaka/32/33293_2.png) [@ShoOsaka](https://discourse.threejs.org/u/ShoOsaka)\
**Post date:** [March 6, 2024, 5:55am UTC](https://discourse.threejs.org/t/how-can-i-make-my-scene-unscrollable-100-fitting/62337/2 "2024-03-06T05:55:07Z")

</div>

Hi Mr.Junk\_Mail

It seems that the default margin of the existing unused canvas element and body is doing a bad thing.

I hope this helps

```javascript
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>

<body>
</body>
<script type="importmap">
    {
        "imports": {
        "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.161.0/three.module.js",
         "three/addons/": "https://unpkg.com/three@v0.161.0/examples/jsm/"
        }
     }
</script>
<style>
body {
  margin: 0;
}
</style>
<script type="module" src="/tetrahedron.js"></script>
</html>

```

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [March 6, 2024, 7:36am UTC](https://discourse.threejs.org/t/how-can-i-make-my-scene-unscrollable-100-fitting/62337/3 "2024-03-06T07:36:34Z")

</div>

> [@ShoOsaka](#):
>
> ```javascript
> dy {
> margin: 0;
> 
> ```

Yup good tip.

Also… in a resize handler, there is a 3rd boolean parameter to renderer.setSize on the renderer, that when set = false, prevents the renderer from changing the width/height .style of the canvas, and thus lets you fully control the canvas scaling via CSS.  
Otherwise when you .setSize on the renderer it can cause a feedback loop where the canvas style changing, causes the canvas to change size, the margin is then applied by css, which makes the document overflow which can trigger another resize.