html – CSS高度100％溢出：自动不显示所有嵌套内容

概述基本上我有一个单页 HTML应用程序,其中包含所有固定位置,我只希望一个窗格具有可滚动内容.一切都按预期工作,但我无法滚动到内部容器容器的底部.我已经尝试将所有东西都移到abs pos,我已经尝试了所有我能够找到的解决方案,但是没有骰子.这是一个小提琴( http://jsfiddle.net/yhhjL/),这里是我的标记和CSS的粗略模拟： HTML <header> <p>Compa 基本上我有一个单页 HTML应用程序,其中包含所有固定位置,我只希望一个窗格具有可滚动内容.一切都按预期工作,但我无法滚动到内部容器容器的底部.我已经尝试将所有东西都移到abs pos,我已经尝试了所有我能够找到的解决方案,但是没有骰子.这是一个小提琴( http://jsfiddle.net/yhhjL/),这里是我的标记和CSS的粗略模拟：

HTML

<header>    <p>Company</p></header><div ></div><div ></div><div >    <div >        <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 ></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;}

任何想法将不胜感激.

解决方法 http://jsfiddle.net/yhhjL/2/

问题是固定阶段左边的元素离开了页面,所以问题不在于它滚动到底部.该元素刚被切断.

通过移除固定级左侧的高度并将其替换为

.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

总结

以上是内存溢出为你收集整理的html – CSS高度100％溢出：自动不显示所有嵌套内容全部内容，希望文章能够帮你解决html – CSS高度100％溢出：自动不显示所有嵌套内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。