Html element not covering 100% height

Question

I want this element to cover 100% of the screen height, obviously not doing as so, any fixes? I see that the div is 100% height of the section which is 100% of the body which is set as 100%.

<body>
    <section id="Block1">
        <div class="firstsection">
            <h1>Lorem Ipsum</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo magnam iusto quibusdam quas reiciendis fugit architecto consequatur similique distinctio dolore repudiandae rem illo alias iure sunt eos culpa, amet consectetur!</p>
        </div>
    </section>
</body>

CSS

body {
    width: 100%;
    height: 100%;
}
* {
    padding: 0px;
    margin: 0px;
}
.firstsection {
    width: 50%;
    height: 100%;
    background-color: yellowgreen;
    text-align: center;
}
#Block1 {
    width: 100%;
    height: 100%;
}

use `vh` or`vw` CSS units, like `100vh` – Laaouatni Anas Oct 15 '22 at 21:05 — Laaouatni Anas, Oct 15 '22 at 21:05

score 0 · Answer 1 · answered Oct 15 '22 at 21:06

0

Use this for body:

body {
    height: 100vh;
}

answered Oct 15 '22 at 21:06

Mohammed Ahmed

435
2
11

score 0 · Answer 2 · answered Oct 15 '22 at 21:07

0

You need to set height and width 100% also for html,

html, body {
    width: 100%;
    height: 100%;
}

you can additionally use vh vw dimensions to set width and height on the whole screen

#Block1 {
    width: 100vw;
    height: 100vh;
}

answered Oct 15 '22 at 21:07

Haim Abeles

982
6
19

score 0 · Answer 3 · answered Oct 15 '22 at 21:08

Why no one is adding a snippet? body {height: 100vh;}

body {
    width: 100%;
    height: 100vh;
}
* {
    padding: 0px;
    margin: 0px;
}
.firstsection {
    width: 50%;
    height: 100%;
    background-color: yellowgreen;
    text-align: center;
}
#Block1 {
    width: 100%;
    height: 100%;
}

<body>
    <section id="Block1">
        <div class="firstsection">
            <h1>Lorem Ipsum</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo magnam iusto quibusdam quas reiciendis fugit architecto consequatur similique distinctio dolore repudiandae rem illo alias iure sunt eos culpa, amet consectetur!</p>
        </div>
    </section>
</body>

Html element not covering 100% height

3 Answers3