Question

我有以下网页结构。

第1部分：标题，固定高度

第2部分：内容，可变高度

第3部分：页脚，固定高度

我希望以下内容成立：

1）如果内容小于screen_height - header_height - footer_height：页脚应该粘贴到页面底部，为页眉和页脚之间的内容提供所有屏幕空间。

2）如果内容大于screen_height - header_height - footer_height：页面将滚动，页脚将位于页面底部。（这种情况已经可以实现，它是所有普通网页的外观）

首先，我做了以下

HTML：

<div class="page-content" style="display: table;height: 100%;width: 100%;">
    <div class="header-section" style="display: table-row;height: 10px;">
        Content here
    </div>
    <div id="content-section" style="display: table-row;height: auto;">
        Content here
    </div>
    <div id="footer-section" style="display: table-row;height: 230px;">
        Content here
    </div>
</div>

这样，标题行的跨度不是10px，而是更高。我想将标题行限制在10px高度。这种表结构可以实现吗？那么跨浏览器的兼容性呢？

感谢。

Answer 1

要降低标题高度，请同时添加line-height:10px。

您可以添加Javascript以应用高度。

请检查小提琴 - https://jsfiddle.net/afelixj/c8vq3Lbu/5/

Answer 2

表尽力展示其中的所有内容。因此，由于文本“此处的内容”高于10px，因此顶行将展开以显示所有内容。

可能的解决方案

将标题从表格中取出并放在上面。普通块以更直接的方式处理height。

html, body {
  margin: 0;
  height: 100%
}

<header class="header-section" style="height:10px; overflow:hidden">
  Content here
</header>
<div class="page-content" style="display:table; height:calc(100% - 10px); width:100%;">
  <div id="content-section" style="display:table-row; height:auto;">
    Content here
  </div>
  <div id="footer-section" style="display:table-row; height:230px;">
    Content here
  </div>
</div>

在您给出高度的标题中的表格单元格中添加一个额外的div。如果表格单元格中的div为10px高，则即使内容溢出，单元格也不必展开。

html, body {
  margin: 0;
  height: 100%
}

<div class="page-content" style="display:table; height:100%; width:100%;">
  <div class="header-section" style="display:table-row; height:10px; ">
    <div style="display:table-cell;">
      <div style="height:10px; overflow:hidden">
        Content here
      </div>
    </div>
  </div>
  <div id="content-section" style="display:table-row; height:auto;">
    Content here
  </div>
  <div id="footer-section" style="display:table-row; height:230px;">
    Content here
  </div>
</div>

或者，如果问题是内容实际上是10px高，但是在单元格中有一些额外的像素，那么内容可能就是内联并为下降器留出空间。在这种情况下，解决方案是提供内容display:block或vertical-align:top样式。

html, body {
  margin: 0;
  height: 100%
}

<div class="page-content" style="display:table; height:100%; width:100%;">
  <div class="header-section" style="display:table-row; height:10px; ">
    <div style="display:table-cell;">
      <img src="http://lorempixel.com/300/10" alt="" style="display:block"/>
    </div>
  </div>
  <div id="content-section" style="display:table-row; height:auto;">
    Content here
  </div>
  <div id="footer-section" style="display:table-row; height:230px;">
    Content here
  </div>
</div>

对于跨浏览器兼容性，通常最好模拟一个完整的表（嵌套div为table，table-row和table cell），因为旧版浏览器可能存在内容问题直接放在表格行中。

Answer 3

您无需使用表格布局来实现此目的。

为主要内容calc上的min-height添加div。而已。使用视口相对单位获取视口（屏幕）的高度，并减去页眉和页脚的固定高度。

所有你需要的是：

.header { height: 1.5em; } /* Fixed height, any unit */
.footer { height: 200px; } /* Fixed height, any unit */
.main { min-height: calc(100vh - 1.5em - 200px); } /* Calculated min-height */

小提琴：http://jsfiddle.net/abhitalks/jpunjng4/2/

<强>段：

（全屏查看效果）

* { box-sizing: border-box; padding: 0; margin: 0; }
.header { height: 1.5em; background-color: #eef; border-bottom: 1px solid #999; }
.footer { height: 200px; background-color: #efe; border-top: 1px solid #999; }
.header, .footer { overflow: hidden; padding: 4px; }
.main { 
    min-height: calc(100vh - 1.5em - 200px); padding: 4px; 
    background-color: #eee; 
}

<div class="header">
    Header
</div>
<div class="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="footer">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>

强制表格行的高度与内容相同

3 个答案: