Question

我正在尝试设计一个包含三行的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>

Answer 1

如果您使用iframed作为文本并将其放在页眉和页脚之间怎么办？这样，如果你有更多的文字，你可以添加滚动到iframe。

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

Answer 2

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

根据你改变身高尺寸

如何在IE中制作滚动窗格

2 个答案: