Firefox忽略div上的Height:100%css标记，支持内容

Question

我正在设计一个简单的网站，如下所示：--已删除--

就我的生活而言，我无法理解为什么，对于左列（包含jQuery UI手风琴），我将高度设置为100%，但Firefox忽略了这一点，并自动调整为手风琴内容的大小。在Chrome和Safari上一切看起来都很棒，但在Firefox上则不然。。。

现在奇怪的是，如果我给"手风琴"类或"可滚动"类一个自定义高度，那么它将具有正确的属性。

最终的结果是在页面底部有一个静态的支持按钮，手风琴是父div的100%（这将是窗口的大小），并且可以滚动（如chrome和safari）

外面有人有什么消息吗？

Answer 1

我知道它不会（直接）帮助你，但这里你的主要问题是溢出：auto在firefox上不起作用。。。

Answer 2

我尝试了以下操作，它适用于所有浏览器。

为tbody、tr和td设置height:100%。

<table class="main-table">
  <tbody style="height: 100%;">
    <tr style="display: table-row; height: 100%;">
      <td class="list-view" style="opacity: 1; height: 100%;">

Answer 3

当您说要将高度设置为100%时，您在哪里这样做？我假设您正在将其添加到style.css文件中。jQuery UI具有需要覆盖的高度集的自动属性。直接从jquery ui.css文件获取：

.ui-accordion .ui-accordion-icons {
  padding-left: 2.2em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
 padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    overflow: auto;
 }

最好的开始是在jquery-ui.css文件中开始编辑这些功能（我看到你下载了该文件，而不是使用CDN。Border top是你的最佳选择）。尽量让身高适合你想要的。当使用引导程序、实体化等时，您通常必须进入并编辑下载的css文件，因为您的更改不会覆盖它们。在jquery-ui.css文件中快速搜索"手风琴"，您可以快速找到它们为元素定义高度属性的位置。希望这能有所帮助。