1

I have a couple of questions regarding my code and its result: enter image description here

  • Why isn't the body height taking 100% height? You can see the background image is messed up because of it. Apparently there's this html.fa-events-icons-ready element messing it up ?

  • What's the 'ideal' initial CSS setup for the html,body ? I found this minimalistic template, is this considered okay for simple pages/apps?
    html,body { box-sizing: border-box; margin: 0; padding: 0; }

Here's the full code

jruivo
  • 447
  • 1
  • 8
  • 22

1 Answers1

1

100% height works funny, you need to set it on the html tag. Also the margin on the wrapper was causing the background to stretch past the height of the window.

Amend your CSS as per the below:

html, 
body {
  height: 100%;
}

.wrapper {
  padding: 50px;
  margin: auto;
}

The accepted answer in this post explains the way height works pretty well: height: 100% not working

Also, instead of height:100% you can also try the vh unit (view height). e.g. height:100vh which doesn't require setting the height on the parent element.

sigil
  • 129
  • 3
  • 7