JS Calculator

## Brief Background I am currently taking the [Intro to webdev course](https://frontendmasters.com/courses/web-development-v2) on [FrontendMasters](https://frontendmasters.com/). My task is to rebuild the iOS calculator in HTML, CSS and JS as described in the [open-sourced notes](https://btholt.github.io/intro-to-web-dev-v2/js-project) for the course. I came up with a UI sketch that had my calculator centred on the page like so: ![calculator UI sketch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5y39chtbjldwthz8hjq.jpg) But when I tried it out, I got this: ![buggy calculator container](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81bfcjjdrwlup9ax4uu8.jpeg) My code: ```html JS Calculator

``` ```css * { box-sizing: border-box; } body { background-color: #7fffd4; border: solid black; } .container { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; } .calculator { border: solid red; height: 600px; width: 400px; } ``` This was not what I expected. The `container` div did not occupy 100% of the page even after assigning it `width: 100%; height: 100% `. I found this behaviour weird. I then searched dear ol' Google to find out why... ## The solution It turns out there are a few things you need to know to make this work as expected. Lenmor did a great job of taking me through it below: [CSS gotcha: How to fill page with a div?](https://dev.to/lennythedev/css-gotcha-how-to-fill-page-with-a-div-270j)

adrianmurage

How to Make a Div Cover the Whole Page with CSS

Join Our Newsletter. No Spam, Only the good stuff.