1

私はこれに髪を引き裂いています.

<div id="pageContent">
    ..Content..
</div>

<div id="outputPanel">
</div>

2 つのスクロール バー (ページ コンテンツに 1 つ、出力に 1 つ) が必要なため、本文のスクロール バーを無効にしました。

body {
    overflow: hidden;
}

#pageContent {
    height: 100%;
    overflow: auto;
}

#outputPanel{
    height: 20%;
    overflow: auto;
}

出力パネルは機能しますが、コンテンツは機能しません。これが機能しないと私が考える理由です。コンテンツ div を調べると、高さ 2600px (コンテンツの高さ) と表示されますが、100% に設定したので、体の高さの 100% ではないでしょうか? ウィンドウの 100% にする必要があるのはどれですか?

コンテンツの高さを明示的に 300px に設定すると、期待どおりに動作しますが、ウィンドウのサイズが変更される可能性があるため、高さを明示的なピクセル数として設定することはできません..

div をウィンドウの 100% にするにはどうすればよいですか。できるだけ純粋な html で実行しようとしているので、javascript を使用せずにそれを行う方法はありますか。

4

4 に答える 4

0

申し訳ありませんが、コメントとして誤って投稿されました

OK私はそれを理解しました。問題は、divタグがコンテンツのサイズを取得していたことでした。これは、高さが100％に設定されていたため、本文から取得したもので、100％でしたが、HTMLから取得したものでした。セットする。そのサイズに設定しない理由はわかりませんが、htmlタグの高さを明示的に100％に設定すると並べ替えられます。

于 2012-10-19T12:58:13.157 に答える
0

私が思うに、両方のdivはbodyタグ内にあるので、divpagecontentとdivoutputpanelはbodyの子divと言うので、要件に応じて80％と20％にする必要があります...または1つのことを行います

<body>
  <div id="wrapper">
         <div id="pageContent">
         </div>
         <div id="outputPanel">
          </div>
  </div>
</body>

Cssはこのようになります

  body {
         overflow: hidden;
  }
  #wrapper {
      height: 100%;
     overflow: scroll;
   }

  #pageContent {
      height: 80%;
     overflow: scroll;
   }

   #wrapper #outputPanel {
       height: 20%;
       overflow: scroll;
    }

これを試して、私があなたの質問を正しく理解したかどうか教えてください...

于 2012-10-19T11:53:23.770 に答える
0

これはあなたが必要としているものだと思いますxfxは正しいですが、doubleoutputPanelで質問を間違えました

   body {
    overflow: hidden;
}

#pageContent {
    height: 100%;
    overflow: scroll;
}

#outputPanel{
    height: 20%;
    overflow: scroll;
}
于 2012-10-19T11:54:10.000 に答える
0 
body {
    overflow: hidden;
}

#pageContent {
    height: 100%;
    overflow: scroll;
}

#outputPanel {
    height: 20%;
    overflow: scroll;
}
于 2012-10-19T11:32:09.860 に答える