0

fiddle - 短いバージョン - 紫色の部分は親 div に押し込む必要があります

私は基本的に、テーブルを2つに分割して固定ヘッダーの外観を作成しようとしています.動的に生成されたテーブルに依存しているため、javascriptを避けようとしています。とにかく必要。

この JS Fiddle は、まさに私が必要としているものに非常に近いものです。基本的には紫色の部分をはみ出さず、垂直スクロール バーが表示されるように押し込む必要があります。また、下部の水平スクロールバーは、両方の div の水平スクロールを制御する必要があります。

私はこれらの両方を達成できますが、同時に達成することはできません。

私はjavascriptを使用することにオープンですが、固定ヘッダーまたは他の行の高さと幅を知らなくても複数のヘッダーを実行できる必要があり、水平および垂直にスクロールできるdivに絞り込める必要もあります.

これは非常によく似た質問ですが、誰も回答していません 水平スクロールバーと垂直スクロールバーがオンになっているヘッダーテーブルを修正しました

HTML 部分

<div class="main">
    <div class="right">
        <div class="top_right">
            <table>
                <tr>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                </tr>
                <tr>
                    <td>"top_right"</td>
                </tr>
                <tr>
                    <td>"top_right"</td>
                </tr>
                <tr>
                    <td>"top_right"</td>
                </tr>
            </table>
        </div>
        <div class="bottom_right">
            <table>
                <tr>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
            </table>
        </div>
    </div>
</div>

CSS 部分

html, body {
    height:100%;
}
.main {
    position: relative;
    height: 600px;
    background-color: lightblue;
    margin: 50px 50px;
}
.right {
    height: 100%;
    width: 800px;
    overflow: scroll;
}
.top_right {
    z-index: 2;
    position: absolute; 
    top: 0px;
    left: 0px;
    width: 9000px;
    background-color:purple;
    overflow-x: hidden;
    overflow-y: hidden;
}
.bottom_right {
    background-color: pink;
    position: relative;
    top: 100px;
    left: 0px;
    height: 1000px;
    width: 9000px;
    overflow-x:hidden;
    overflow-y:hidden;
}
4

1 に答える 1

0

親div（メイン）の高さが固定されているため

.main {
    **height: 600px;**
    background-color: lightblue;
    margin: 50px 50px;
}

右のdivにも固定の高さを設定しないのはなぜですか。この方法では、常にラッパーと同じ高さになり、スクロールバーは引き続き表示されますhttp://jsfiddle.net/EPeLX/6/

.right {
    width:500px;
    background-color:purple;
    overflow-x: scroll;
    overflow-y: scroll;
    height: 600px;
}
于 2013-05-24T06:50:14.427 に答える