How to make div full width of screen

Question

I want to make div which take 100% of width and hight of the screen and it may also responsive -

it gives output like this -

* {
  top: 0%;
  position: relative;
  font-family: 'Imprima', sans-serif;
}

.container {
  background-color: #D5C5C6;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  gap: 120px;
}

<div class="container">

  <div class="nev" id="nevbar"></div>

  <div class="hero">
    <div class="heading">Beauty Brands</div>
    <div class="description">Treat your makeup like jewelry for the face. Play with colors, shapes, structure It can transform you.</div>
    <div class="ctc-btn"><a href="">Get Offer</a></div>
  </div>

  <!-- <div id="brand">Brands</div> -->

  <div class="footer">www.logo.com</div>

</div>

Answer 1

height: 100% means 100% of the parent element's height.

The default height of block-level elements is fit-content. fit-content means, that the height is undefined but will be calculated to fit the content of the element.

If we combine both pieces of information together, you will realize that 100% of undefined is still undefined. As such 100% only works with a specifically defined height.

What you actually want to use are the values vw (view width) and vh (view height) which are units relative to the size of the viewport. The viewport is the visual area of a web browser (not the screen size).

However, to work correctly, you need to add a few things to prevent overflow issues.

1. You need to reset the default body margin as otherwise you would overflow by 2 x 8px : body { margin: 0; }.
2. The element that should fit the entire screen must set the box model to border-box as otherwise padding or border would also overflow the screen as those are normally calculated on top of the width and height of the element.
3. You need to use either min-height or an overflow rule to that element as otherwise a larger content would overflow the element and collide with other content.

* {
  font-family: 'Imprima', sans-serif;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  background-color: #D5C5C6;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  gap: 120px;
  min-height: 100vh;
  padding: 0.5em;
}

<div class="container">

  <div class="nev" id="nevbar"></div>

  <div class="hero">
    <div class="heading">Beauty Brands</div>
    <div class="description">Treat your makeup like jewelry for the face. Play with colors, shapes, structure It can transform you.</div>
    <div class="ctc-btn"><a href="">Get Offer</a></div>
  </div>

  <!-- <div id="brand">Brands</div> -->

  <div class="footer">www.logo.com</div>

</div>