0

小提琴- 短版 - 紫色部分需要塞进父 div

我基本上是在尝试通过将表拆分为两个来创建一个固定的表头外观反正需要。

这个 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 回答