-1

I am trying to create a div which is 100 viewheight. Inside the div is a h1 placed. The h1 enlarges the div so it isn't 100 viewheight anymore. It shouldn't have a scrollbar like right now in the example below. I searched on this question for a answer but didn't found anything.

How can I add a h1 element to a div with 100 viewheight, without enlarging the div? Why is it enlarging it?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body style="margin: 0;">
  <div style="height: 100vh; background: yellow;">
    <p>Test</p>
  </div>
</body>

</html>
Nightscape
  • 464
  • 6
  • 19

1 Answers1

0

Use overflow:hidden if you dont want the content of your div it will remove the scrollbar or if you want to show inside your div then use position

 div{position:relative}
 h1{position:absolute}

This positioning will inscribe the h1 and will show on top of div h1 and will not overflow

Also, you can use the display property

     div{display:flex;justify-content:space- 
      around;height:100vh}

    h1{ height:auto}

This will avoid overflow by flex in one line. If you dont want flex just use height:auto in your h1. It will take upto max width of its parent div

Himanshu
  • 3,830
  • 2
  • 10
  • 29