5

基本上，我有一个一页的 HTML 应用程序，所有内容都固定在位置上，我只希望一个窗格具有可滚动的内容。一切都按预期工作，但我无法滚动到内部内容容器的底部。我已经尝试将所有内容移至 abs pos，我已经尝试了所有能够在 SO 上找到的相关解决方案，但没有骰子。这是一个小提琴（http://jsfiddle.net/yhhjL/），这是我的标记和 CSS 的粗略模拟：

HTML

<header>
    <p>Company</p>
</header>

<div class="fixed-row-one"></div>

<div class="fixed-row-two"></div>

<div class="fixed-stage-left">

    <div class="scrollable">

        <table cellpadding="0" cellspacing="0">

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>Last</td>
                <td>Last</td>
                <td>Last</td>
                <td>Last</td>
            </tr>

        </table>

    </div>

</div>

<div class="fixed-stage-right"></div>

CSS

body {
    margin:0;
    padding: 0    
}

header {
    width: 100%;
    height: 50px;
    position: fixed;
    background: black;
    color: white;
}

.fixed-row-one {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 50px;
    background: #AAA;
    color: white;
}

.fixed-row-two {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 100px;
    background: #e51837;
    color: white;
}

.fixed-stage-left {
    width: 50%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    top: 150px;
    left: 0;
    background: #f1f1f1;
    color: #000;
}

.scrollable {
    width: 100%;
    height: 100%;
    background: #262626;
    overflow: auto;
    position: absolute;
}

.scrollable table tr{
    width: 100%;
    height: 50px;
    color: white;
    border-bottom: 1px solid #CCC;
}

.fixed-stage-right {
    width: 50%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    top: 150px;
    right: 0;
    background: #0cf;
    color: #000;
}

任何想法将不胜感激。

4

1 回答 1

6

http://jsfiddle.net/yhhjL/2/

问题是 fixed-stage-left 元素离开了页面，所以问题不在于它滚动到底部。该元素刚刚被切断。

通过删除 fixed-stage-left 的高度并将其替换为

.fixed-stage-left {
   width: 50%;
   top:150px; /*Edited here */
   bottom:0; /*Edited here */
   position: fixed;
   overflow: hidden;
   top: 150px;
   left: 0;
   background: #f1f1f1;
   color: #000;
}

这会强制浏览器调整高度以适应这两个位置。

有关此类问题的更多信息： CSS：将宽度/高度设置为百分比减去像素

于 2013-04-26T00:42:50.877 回答