0

現在、以下のレイアウトをテーブルからdivに変換しようとしています。次の機能があります。

  1. 幅と高さが 100% (ブラウザ ウィンドウのサイズに対して)
  2. 上半分は 100% の 80% を占め、下半分は 20% を占める
  3. テキストがオーバーフローすると、上部セクションは y 方向にスクロールします。固定ヘッダーはスクロールしても移動しませんが、下のテキスト (lorem ipsum...) はその下に移動します。
  4. 下部セクションはまったくスクロールしません

テーブルではなくDIVでこれを達成するにはどうすればよいですか?

ここに画像の説明を入力

これはこれまでの私のコードです: http://jsfiddle.net/zhz2m/1/

<table width="100%" height="100%" id="container">
  <tr>
    <td height="85%" id="top"><div id="chat" style="height: 100%; overflow: scroll-y">
        <h2>Innovation Week 2013 - Virtual Idea Wall</h2>
      </div></td>
  </tr>
  <tr>
    <td height="10%" id="bottom"><form id="send-message">
        <p>
          <label for="title">Please give your idea a title</label>
          <br />
          <input type="text" id="title" name="title"/>
        </p>
        <p>
          <label for="message">Please provide details of your idea</label>
          <br>
          <input type="text" id="message" name="message"/>
        </p>
        <p>
          <input type="submit">
        </p>
        </input>
      </form></td>
  </tr>
</table>
4

1 に答える 1

2

このフィドルを見てください：

高さ、固定位置、およびオーバーフロー動作を定義します。

http://jsfiddle.net/63bjC/1/

CSS:

#main {
    width: 100%;
    height: 80%;
    min-height: 80%;
    max-height: 80%;
    position: fixed;
    overflow: scroll;
}

#footer {
    width: 100%;
    height: 20%;
    min-height: 20%;
    max-height: 20%;
    position: fixed;
    bottom: 0;
    background-color: orange;
}

マークアップ:

<div id="main">content</div>
<div id="footer">fixed at bottom</div>
于 2013-07-21T20:02:16.447 に答える