0

画面の上部に常に表示される 1 つのヘッダー、画面の下部に常に表示される 1 つのフッター、および必要に応じてスクロールバーを使用してテキスト用の残りのスペースの 3 つの行を持つ 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 に答える