CSS 高度 100% + 溢出：自动不显示所有嵌套内容答案

【问题标题】：CSS Height 100% + overflow: auto not showing all of nest contentCSS 高度 100% + 溢出：自动不显示所有嵌套内容
【发布时间】：2013-04-26 08:42:50
【问题描述】：

基本上我有一个单页 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;
}

任何想法都将不胜感激。

【问题讨论】：

标签： html css positioning spacing

【解决方案1】：

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: Setting width/height as Percentage minus pixels

【讨论】：