Firefox ignoring height: 100%

Question

I have the following snippet that works in chrome and explorer, however I can't seem to get firefox to make the left bar .leftpanel stretch to the full height of the parent .viewer

JSfiddle

Snippet

html,
body {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  list-style-type: none;
}
.fullscreen {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: pink;
  display: table;
  z-index: 1;
}
.centeralign {
  vertical-align: middle;
  width: 100%;
  height: 100%;
  display: table-cell;
  background-color: blue;
  text-align: center;
  padding: 2em;
}
.viewer {
  text-align: left;
  display: inline-block;
  width: 90%;
  height: 90%;
  position: relative;
  background-color: green;
  padding: 1em;
  min-height: 35.45em;
}
.leftpanel {
  width: 15em;
  /*Alter depending on how much space this takes*/
  float: left;
  height: 100%;
  position: relative;
  background-color: yellow;
}
.leftpanel .slide {
  width: 15em;
  height: 9.706em;
  display: block;
  margin-bottom: 1em;
  background-color: red;
}
.leftpanel .comments_container {
  display: table;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 14em;
  width: 15em;
  background-color: orange;
}

<ul class="fullscreen">
  <li class="centeralign">
    <ul class="viewer">
      <li class="leftpanel">
        <ul class="slide">
          <li class="slide_image">
          </li>
          <li class="slide_menu">
          </li>
        </ul>
        <ul class="slide">
          <li class="slide_image">
          </li>
          <li class="slide_menu">
          </li>
        </ul>
        <ul class="comments_container">
          <li class="comments">
            <span class="comment">Test</span>
          </li>
          <li class="new_comment">
            <form action="new_comment.php">
              <input type="text" name="comment" />
              <input type="submit" name="Send" />
            </form>
          </li>
        </ul>
      </li>
      <li class="viewport">
      </li>
      <li class="close">
        X
      </li>
    </ul>
  </li>
</ul>

Answer 1

At first sight, your issue is you are setting a big min-height to your parent .viewer, so just remove it because you already have set a height as 90% within another parent.

html,
body {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  list-style-type: none;
}
.fullscreen {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: pink;
  display: table;
  z-index: 1;
}
.centeralign {
  vertical-align: middle;
  width: 100%;
  height: 100%;
  display: table-cell;
  background-color: blue;
  text-align: center;
  padding: 2em;
}
.viewer {
  text-align: left;
  display: inline-block;
  width: 90%;
  height: 90%;
  position: relative;
  background-color: green;
  padding: 1em;
  /* min-height: 35.45em; remove this line */
}
.leftpanel {
  width: 15em;
  /*Alter depending on how much space this takes*/
  float: left;
  height: 100%;
  position: relative;
  background-color: yellow;
}
.leftpanel .slide {
  width: 15em;
  height: 9.706em;
  display: block;
  margin-bottom: 1em;
  background-color: red;
}
.leftpanel .comments_container {
  display: table;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 14em;
  width: 15em;
  background-color: orange;
}

<ul class="fullscreen">
  <li class="centeralign">
    <ul class="viewer">
      <li class="leftpanel">
        <ul class="slide">
          <li class="slide_image">
          </li>
          <li class="slide_menu">
          </li>
        </ul>
        <ul class="slide">
          <li class="slide_image">
          </li>
          <li class="slide_menu">
          </li>
        </ul>
        <ul class="comments_container">
          <li class="comments">
            <span class="comment">Test</span>
          </li>
          <li class="new_comment">
            <form action="new_comment.php">
              <input type="text" name="comment" />
              <input type="submit" name="Send" />
            </form>
          </li>
        </ul>
      </li>
      <li class="viewport">
      </li>
      <li class="close">
        X
      </li>
    </ul>
  </li>
</ul>

Answer 2

Although your question has already been answered, here is the 'general' solution:

.clearfix:before,

.clearfix:after { content: ''; display: table }

.clearfix:after { clear: both }

Your viewer class needs the well known 'clearfix' added in the HTML, search google for a proper explanation on that. Modify your viewer HTML <ul class="viewer clearfix"> and add the class to your global CSS (for general use) and you are good to go.

Answer 3

Unfortunately I can't tell you why firefox is doing this or what is causing this, however, I can give you a possible fix for this problem, which doesn't include that much of a change in your code.

The solution is simple, use display:flex instead of display:inline-block on your .viewer element and give the children, in this case the .leftpanel element the property align-items:stretch

To read more on this check out either this css-tricks guide or this MDN guide.

Your updated code will look like this:

HTML: Nothing changed.

CSS:

.viewer {
    text-align: left;
    display: flex; /* changed the display to flex */
    width: 90%;
    height: 90%;
    position: relative;
    background-color: green;
    padding: 1em;
    min-height: 35.45em;
}

.leftpanel {
    width: 15em; /*Alter depending on how much space this takes*/
    float: left;
    height: 100%;
    position: relative;
    background-color: yellow;
    align-items: stretch; /* Added the align-items property */
}

JSFiddle

Hope this helps!