Demo Fiddle

Question

我想做什么：将<body>标记设置为display:table，将标题/内容/页脚设置为display:table-row s。我还希望<body>为屏幕大小，如果需要，子元素将显示滚动条。

我通过设置

来做到这一点

body{
  display:table;
  height:100%
}

这适用于chrome，但在firefox中，正文的高度是屏幕的高度。这是预期的还是火狐问题？有没有办法在使用表时实现这一点？它曾经没有桌面工作，但我需要页脚不偶尔出现，所以我需要我的内容根据需要增长，它似乎在chrome中很好地工作。

您可以在我的（alpha）网站sportmenow.com

上看到这一点

Answer 1

我在下面提供了两个解决方案，第一个是更有条理的，第二个是你的设计模式。

Demo Fiddle

为什么不实现更加结构化的HTML，它遵循table->row->cell更加语义正确的模式和结构：

<header>
    <section></section>
</header>
<article>
    <section></section>
</article>
<footer>
    <section></section>
</footer>

CSS：

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
body {
    display:table;
}
header, footer, article {
    display:table-row;
    width:100%;
    height:100%;
}
header, footer {
    height:50px;
    background:black;
}
section {
    display:table-cell;
    width:100%;
}
section:nth-child(2) {
    height:100%;
}

然而.. 如果您不太关心这一点，可以在display:table元素上使用body，然后在下面使用{ - 1}} - 每个部分都有限制除非它有内容（甚至只有nbsp;）

，否则会崩溃

Demo Fiddle

HTML

<header>headerContent</header>
<article>mainContent</article>
<footer>footerContent</footer>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
body {
    display:table;
}
header, footer, article {
    display:table-row;
    width:100%;
    height:100%;
}
header, footer {
    height:50px;
    background:black;
}

Answer 2

您可以在firefox中指定display:table元素的高度。但是，要使用完整的浏览器窗口，您可能还必须指定html元素的高度：

html { height:100%; }

fiddle

Answer 3

要将任何元素设置为其父级高度的100％，父元素必须具有已定义的非百分比高度（px，em等），或者所有祖先元素必须为100％高度。例如，如果您的元素是body的第一个子元素，则可以使用以下CSS将其设置为100％高度：

html, body, #my_element {
  height: 100%;
}

如果要将父级设置为特定高度，然后将目标元素设置为100％，则目标元素也将是该高度。想象一下，您有一个ID为element_parent的元素，其中包含您的目标元素：

#element_parent {
  height: 500px;
}

#my_element {
  height: 100%;
}

在上面的示例中，意味着my_element将扩展到其父设置为的完整500px。

Answer 4

根据此错误报告https://bugzilla.mozilla.org/show_bug.cgi?id=26617#c14，当元素使用 display：table-row 时，Firefox会将高度视为最小高度，这就是为什么你只有在Firefox中发现问题。

另一方面，如果你已经掌握了页眉/页脚的高度，你可以在 top 和 position：fixed 和修复值> bottom 属性来代替布局页面。

简而言之，请尝试更换 .body 和 .footer 上的CSS。

.body { 
    display: block; 
    position: fixed; 
    width: 100%;
    top: 60px; 
    bottom: 92px; 
    padding: 6px;
}
.footer {
    display: block;
    position: fixed;
    height: 70px;
    width: 100%;
    bottom: 0;
    text-align: center;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;   
}

这将在Firefox和Chrome上保持一致。

但是，当您隐藏页脚时，您需要使用javascript来更新CSS属性＆＃34; bottom＆＃34;你的.body元素为0。

$('.body').css({'bottom':'0'});

无法将高度设置为显示：firefox中的table元素，在chrome中工作

4 个答案:

Demo Fiddle

Demo Fiddle