0

我正在尝试设计一个包含三行的 HTML 模板：一个始终显示在屏幕顶部的页眉，一个始终显示在屏幕底部的页脚和剩余的文本空间，必要时使用滚动条。

以下 HTML 在 FF 和 Chrome 中运行良好，但在 IE9 中不显示任何文本。有人知道出了什么问题吗？

<!doctype html>
<html>
  <head>
<title>Image resize tetst</title>
<style type="text/css" media="screen">
    html, body {
      margin:  0;
      padding: 0;
      height:  100%;
      width:100%;
    }

    .wrapper {
      display: table;
      height:  100%;
      width:100%;
    }

    .wrapper-row {
      display: table-row;
      width:100%;
      height:  1px;
    }

    .wrapper-content {
      /* Firefox requires this */
      display: table-cell;
      width:100%;
    }

    .wrapper-row-expanded {
      height:  100%;
      display: table-row;
    }

    .wrapper-row-expanded > .wrapper-content {
      height: 100%;
    }

    .scroll-container {
      /* Firefox requires this to do the absolute positioning correctly */
      display:    inline-block;
      overflow-y: auto;
      position:   relative;
    }

    .scroll-content {
      position: absolute;
      top:      0;
      bottom:   0;
    }
  </style>

</head>
  <body>

    <div class="wrapper">

    <div class="wrapper-row">
        <div class="wrapper-content header">
        Header
        </div>
    </div>

    <div class="wrapper-row-expanded">
        <div class="wrapper-content scroll-container">
        <div class="scroll-content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate pulvinar ullamcorper. Integer aliquet nunc vitae massa egestas ullamcorper. Nunc volutpat eleifend sem, a convallis lacus placerat eu. Curabitur venenatis ipsum in magna bibendum tincidunt. Donec nunc metus, pellentesque ullamcorper pellentesque sit amet, ornare vel est. Nam vehicula mi nibh. Praesent consectetur ipsum tincidunt nunc tincidunt eleifend luctus nisi viverra. Donec consequat, sapien ac semper tempus, quam metus pellentesque dui, ut dictum magna nibh eu magna. Nullam condimentum turpis vel mauris ornare vehicula. Maecenas a urna at turpis venenatis iaculis in nec nunc. Nunc tempus massa sit amet arcu malesuada ornare. Aenean pellentesque euismod quam vitae ornare. Maecenas sodales, mauris vel imperdiet eleifend, massa sem pellentesque justo, sit amet malesuada felis justo in elit.
            </p>
        </div>
        </div>
    </div>

    <div class="wrapper-row">
          <div class="wrapper-content footer" style="height:200px">
            Footer
          </div>
    </div>

    </div>
  </body>
</html>
4

2 回答 2

0 
.scroll-content {
    overflow-y: auto;
    height:200px;
}

根据您更改高度大小

于 2013-08-09T10:27:50.160 回答
0

如果您对文本使用 iframe 并将其放在页眉和页脚之间会怎样？这样，如果您有更多文本，您可以向 iframe 添加滚动。

<iframe src="URL" scrolling="yes"></iframe>

于 2013-08-09T10:22:59.700 回答