Which firefox quirk causes this behavior and how can I recreate it in standards mode?

269 Views Asked by thesecretmaster At 20 June 2019 at 17:53

For firefox, the following document renders differently in standards mode then in quirks mode. In quirks mode, the div fills the screen, however in standards mode it does not. I read through the MDN quirks list and couldn't seem to find a behavior to blame. While it'd be cool to know the quirk, my question is really how can I replicate the quirks mode behavior in standards mode?

<!DOCTYPE html>
<!-- remove doctype for quirks mode rendering -->
<head>
  <style>
  #test {
    height:100%;
    background:black;
  }
  </style>
</head>
<body>
  <div id="test">
    content
  </div>
</body>

Original Q&A

There are 2 best solutions below

AudioBubble On 20 June 2019 at 18:11

If this is acceptable, you can try another measure, for example, 'vh':

#test {
 height: 100vh;
 background: black;
}

vh - Equivalent to 1% of the height of the browser window. vw - Equivalent to 1% of the width of the browser window.

Quentin On 20 June 2019 at 18:28

The relevant quirk is:

There are a bunch of quirks to get percentage heights on images, tables, objects, and applets (etc.?) to "work" (the way they did in Netscape Navigator 4), even though CSS says that percentage heights should behave like 'auto' heights when the parent element doesn't have a fixed height. See bug 33443#c9. See also bug 41656 and its duplicates. Some of these quirks may cause other effects (see bug 54119).

The best replication of it that I can think of would be:

html,body { margin: 0; padding: 0; }
#test {
  height:100vh;
  background:black;
}

… or even just:

body {
    background: black;
}

Which firefox quirk causes this behavior and how can I recreate it in standards mode?

There are 2 best solutions below

Related Questions in HTML

Related Questions in FIREFOX

Related Questions in QUIRKS-MODE

Trending Questions

Popular # Hahtags

Popular Questions