0

私はこのような文書を持っています：

<html>
<head>
<style>
div.result {
height: 500px;
overflow: auto;
width: 900px;
}
</style>
<div class="options"></div>
<div class="result">
<table>
<!--here I have large table-->
</table>
</div>

これにより、スクロールバー付きの固定サイズのボックスが表示されます。結果ボックスにブラウザで使用可能なサイズの残りを取り、スクロールバーを残したい（必要な場合）

オプションdivが上と下にとどまるように、幅が100％で、残りのブラウザーの高さの高さが別のdivになります。

出来ますか？

これが私が得たい結果です。 ここに画像の説明を入力してください つまり、ブラウザのサイズを変更すると、スクロールバーが右下に表示され、iframeのようになります。

4

2 に答える 2

1

オプションと結果要素に絶対サイズと位置を設定できます。

div.options {
    width: 100%;
    height: 300px; // Set height of the options box
    padding: 0;
}

div.result {
    position: absolute;
    top: 300px; // Same as options box
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll; // Could be auto too
}

これはうまくいくはずです。

于 2012-05-14T14:12:50.090 に答える
0

はい、これは可能です！

位置を試してください：すべての側面を埋める絶対

  div.result {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    overflow: auto;
  }

または、幅をマージンやパディングに依存しないようにするボーダーボックスソリューション（幅：100％が正しく適用されている間にマージンを使用できるようにするため）

  div.result {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow: auto;
    margin-top: 100px; /* Or whatever you need */
  }
于 2012-05-14T14:09:12.327 に答える