0

I've recently been working on something, and I created a div element to contain everything. I made the width 100% and the height 100%. However when I do this, the div is super small and doesn't have any height. It gains height when I use pixels though. Here is my code:

body {
  background-color: #71A048;
  font-family: verdana;
}

.border {
  width: 100%;
  height: 100%;
  border: 2px solid white;
}
<div class="border"></div>

Here it is on CodePen: https://codepen.io/MAXHACKER/pen/YzwjrbZ

j08691
  • 204,283
  • 31
  • 260
  • 272
HoneyPoop
  • 473
  • 1
  • 6
  • 25
  • 2
    html, body {height: 100%} or body {height: 100vh} – VXp Jul 24 '20 at 15:57
  • That's because its parent containers have no height. Set the height of your body and html to 100% for example. – Ryano Jul 24 '20 at 15:59
  • Thanks, I get it now, but is there a way to make it so that when you resize the browser and ect. there will never be overflow and it will size with the screen? – HoneyPoop Jul 24 '20 at 16:08

0 Answers0