Firefox 忽略高度：100%

Question

我有以下适用于 chrome 和资源管理器的 sn-p，但是我似乎无法让 firefox 使左侧栏 .leftpanel 拉伸到父 .viewer 的完整高度

JSfiddle

片段

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

很遗憾，我无法告诉您为什么 firefox 会这样做或导致此问题的原因，但是，我可以为您提供解决此问题的可能方法，其中不包括对您的代码进行太多更改。

解决方案很简单，在.viewer 元素上使用display:flex 而不是 display:inline-block 并给children，在本例中为.leftpanel 元素属性align-items:stretch

要了解更多信息，请查看this css-tricks guide 或this MDN guide。

您更新后的代码将如下所示：

HTML：没有任何改变。

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

希望这会有所帮助！

Answer 2

乍一看，您的问题是您正在为您的父级.viewer 设置一个大的min-height，因此只需将其删除，因为您已经在另一个父级中将height 设置为90%。

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 3

虽然您的问题已经得到解答，但这里是“通用”解决方案：

.clearfix:before,

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

.clearfix:after { clear: both }

您的viewer 类需要在 HTML 中添加众所周知的“clearfix”，请在 Google 上搜索以获取正确解释。修改您的查看器 HTML <ul class="viewer clearfix"> 并将该类添加到您的 global CSS（用于一般用途）中，您就可以开始了。