Question

我有一个有两列的表。当第一列大于窗口高度时，它必须具有滚动。所以我在高度100％的单元格内使用div并滚动自动。

我的问题是当＆＃34;细胞＆＃34;有滚动，他的内容被...滚动条隐藏。

这是我的HTML：

<div id="table">
    <div class="sidebar">
        <div>
            <a href="/">Link 1</a>
            <a href="/">Link 2</a>
            <a href="/">Link 3</a>
            <a href="/">Link 4</a>
            <a href="/">Link 5</a>
            <a href="/">Link 6</a>
            <a href="/">Link 7</a>
        </div>
    </div>
    <div class="content">Content page</div>
</div>

这是我的CSS：

*{margin:0px; padding:0px;}
body,html{width:100%; height:100%}
#table{display:table; width:100%; height:100%; background:#eee;}
#table div.sidebar{display:table-cell; vertical-align:top; height:0px; overflow:hidden; background:#4d5b69;}
#table div.sidebar div{height:100%; overflow-x:hidden; overflow-y:auto;}
#table div.sidebar a{display:block; padding:7px 0px 7px 0px; font-weight:bold; white-space:nowrap; border-bottom:1px solid #5b7289; color:#fff;}
#table div.sidebar a span{color:#fff;}
#table div.sidebar a i{min-width:20px; color:#fff; display:inline-block;}
#table div.sidebar a:hover{background:#364a5e}
#table div.sidebar a.logo{padding:10px; text-align:center; font-size:40px;}
#table div.content{display:table-cell; width:100%; height:100%; vertical-align:top; padding:10px;}

这是我的小提琴：http://jsfiddle.net/NQAzt/265/

请将页面模拟为高度200px，只是为了看到第一列（由于滚动条）隐藏了他的内容。

我需要在没有为单元格设置像素宽度的情况下解决此问题。

我也不想使用javascript。

无论如何，无论如何都要显示所有内容，而不是在＆＃34;单元格＆＃34;有滚动条？

修改：似乎在Chrome中工作正常，但在firefox（50）中却没有...

从firefox打印：

print firefox

CSS在外部内容中设置滚动条

0 个答案: