Question

我有以下代码片段可以在chrome和资源管理器中使用，但我似乎无法使用Firefox来使左栏.leftpanel拉伸到父.viewer <的完整高度/ p>

段

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

乍一看，您的问题是您为父min-height设置了一个较大的.viewer，因此您只需删除它，因为您已将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 2

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

.clearfix:before,

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

.clearfix:after { clear: both }

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

Answer 3

不幸的是，我无法告诉你为什么firefox会这样做或导致这种情况的原因，但是，我可以为你提供一个可能的解决方案，这个问题并没有包含你的大部分变化。代码。

解决方案很简单，在fRawData = [] with open(fStagingFile2) as fStagingFile2FH: fRawData = [line.strip() for line in fStagingFile2FH.readlines()] # This is to read each element from the file and chop off the end of line character fNumberOfColumns = 7 fNumberOfRows = len(fRawData)/fNumberOfColumns fRowID = 0 fParameters = [] for fRowID in range(0, len(fRawData), fNumberOfColumns): fParameters.append(fRawData[fRowID:fRowID+fNumberOfColumns]) # This is to convert 1D array to 2D # and down below section is an example of how to read each element of the list # and how to update it if I need so. fRowID = 0 fColumnID = 0 for fRowID in range(fNumberOfRows): for fColumnID in range(fNumberOfColumns): if fColumnID == 0: fParameters[fRowID][fColumnID] = "XXXX" Message2Log("fParameters[" + str(fRowID) + "][" + str(fColumnID) + "] = " + str(fParameters[fRowID][fColumnID]))元素上使用display:flex 代替 display:inline-block，并在此处提供孩子将.viewer元素设置为属性.leftpanel

要详细了解此问题，请查看this css-tricks guide或this MDN guide。

您的更新代码如下所示：

HTML：没有任何改变。

<强> CSS：

align-items:stretch

<强> JSFiddle

希望这有帮助！

Firefox忽略身高：100％

3 个答案: