Question

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

对于我的生活，我可以弄清楚为什么，对于左栏（包含jQuery UI手风琴），我的高度设置为100％，但Firefox忽略了这个和自动调整为手风琴内容的大小。 Chrome和Safari上的一切看起来都很棒，但不是Firefox ......

现在奇怪的部分是，如果我给手风琴＆＃34;定制高度？ class，或者＆＃34; scrollable＆＃34; class，那么它将具有正确的属性。

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

有人在这里有任何信息吗？

Answer 1

我知道它不会（直接）帮助你但在这里你的主要问题是溢出：auto不能在firefox上运行...

Answer 2

当您说您将高度设置为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 .Bandle-top是你最好的选择）。尽量让身高达到你想要的水平。当使用bootstrap，实现等时，您经常需要进入并编辑下载的css文件，因为您的更改不会覆盖他们的。快速搜索＆＃34;手风琴＆＃34;在jquery-ui.css文件中，您可以快速找到他们为元素定义高度属性的位置。希望这可以帮助。

Answer 3

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

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

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

Firefox忽略高度：div上的100％css标记，支持内容

3 个答案: