How to fit CSS to the screen size?

Question

I have this CSS code, my problem is that because of the padding-top (to have some space from the top) my page is too big what makes it to have 'scroll' option and it doesn't fit the whole screen.

How do I make it so the scroll option will be disabled?

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}
body {
    color: #444;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f7f7f7;
}
.container {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding-top: 20px;
}

I tried to add overflow: hidden; which works but then it cuts off some of my divs at the bottom

Please see [ask], then revise to show some HTML so we can see the problem. Also explain your goal more clearly. All you've told us is what doesn't work. — isherwood, Apr 19 '23 at 19:44

score 0 · Answer 1 · answered Apr 19 '23 at 19:46

0

Add box-sizing: border-box; to .container to include the padding in the percentage value for height.

answered Apr 19 '23 at 19:46

Johannes

64,305
18
73
130

score 0 · Answer 2 · answered Apr 19 '23 at 19:51

0

Relys. You can using the

box-sizing: border-box

on your container div to include your padding.

answered Apr 19 '23 at 19:51

Sadiq صديق

5
4

How to fit CSS to the screen size?

2 Answers2