0

this is a very simple question, but not in the problem that i have now. i know how to make <body> full screen. we give it a 100vh height and 100wh width. i have a problem in this part. when i give <body> 100 height, it works. but when i give margin-top for example 20px to the first element of <body>, now the height of <body> wont fill all the height of the screen. you can see it in this picture.

the blue background is for <body>. in the picture, the first element in <body> is the hamburger icon and i gave that a 20px margin-top and 30px margin-left and as you can see, the body is not full height... i am sure that i gave the body tag 100% height.

    <body>
    <div class="hamburger open">&#x2630</div>
    <div class="groups-mobile">
        <button class="create-group">create a group</button>
        <ul class="groups-list">
            <li class="group selected">saman<div class="justify-content-between" style="margin-left: 20px;"><i class="fas fa-edit edit"></i><i class="far fa-trash-alt remove"></i></div></li>
            <li class="group">saaaaammiii<div class="justify-content-between" style="margin-left: 20px;"><i class="fas fa-edit edit"></i><i class="far fa-trash-alt remove"></i></div></li>
            <li class="group">saaaammmm<div class="justify-content-between" style="margin-left: 20px;"><i class="fas fa-edit edit"></i><i class="far fa-trash-alt remove"></i></div></li>
        </ul>
    </div>
    other tags....
    </body>
    


body {
    background: url("../images/matheus-cenali-3RicCdnXfHs-unsplash.jpg");
    background-size: cover;
    font-family: 'Ubuntu', sans-serif;
    height: 100vh;
}

body .hamburger {
font-size: 40px;
background-color:rgba(228, 228, 228, 0.7);
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-top: 20px;
margin-left: 30px;

}

please help me with this problem.

saman
  • 31
  • 5

1 Answers1

0

Since the <body> element much like every other element looks to its parent (<html>), you will need to apply a height to the <html> element.

html {
  height: 100%;
}
body {
  min-height: 100%;
}
BeerusDev
  • 1,444
  • 2
  • 11
  • 30