2014-01-15 201 views
0

当内容溢出时,我需要制作一个可滚动的div。值得注意的是,由于布局原因,div是display: table/table-row系统的一部分。限制显示:高度动态时的表格行/单元元素高度

Demo

底侧栏容器需要允许滚动时的含量超过高度。我遇到的问题是 - 使用这种类型的布局 - CSS无法将较低的div锁定到其父级的动态确定高度(.holder)。它要么需要百分之百的高度,要么百分之百是其父母的高度,这太大了。

我的目标是用纯CSS解决这个问题,这样我们可以避免在改变边栏元素的高度时运行javascript。

.wrapper-page { position: absolute; top: 38px; bottom: 10px; left: 10px; right: 10px; overflow: hidden; } 
.sidebar { width: 25%; height: 100%; } 

.holder { width: 100%; height: 100%; display: table; table-layout: fixed } 
.holder > div:first-child { height: 25%; max-height: 25%; } 
.holder > div { display: table-row; table-layout: fixed } 

正因为如此布局,只有sidebar将正常如果我们使用overflow-y: scroll滚动 - 但滚动整个侧边栏。 .holder > div:last-child是应该滚动的。

<div class="wrapper-page"> 
    <div class="sidebar"> 
     <div class="holder"> 
      <div> 
       box one<br> 
      </div> 
      <div> 
       box two<br> 
      </div> 
     </div> 
    </div> 
</div> 
+0

你能够使用'box-sizing:border-box'吗?如果是这样,请通过百分比设置高度,然后将溢出设置为您喜欢的任何配置。 – RedYetiCo

+0

我不能使用box-sizing,因为我们别无选择,只能支持IE7,而且polyfill的性能消耗太大。 – helion3

+0

所以,你在说'.holder> div:last-child {overflow-y:scroll; ''不工作?这是IE7要求还是其他的限制? – RedYetiCo

回答

0

我有这方面的工作在本地使用:

div { 
    outline: 1px solid blue; 
} 
.wrapper-page { 
    position: absolute; 
    top: 38px; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
    overflow: hidden; 
} 
.sidebar { 
    width: 25%; 
    height: 100% 
} 
.holder { 
    width: 100%; 
    overflow: hidden; 
} 
.holder > div { 
    overflow-y: scroll; 
} 
.holder > div:first-child { 
    height: 25%; 
} 
.holder > div:last-child { 
    height: 75%; 
} 

我试图粘贴回CodePen但它并不在他们的虚拟环境中工作。但它在一个平面的HTML文件中工作。不幸的是,我无法知道这是否适用于您,除非将其作为可能的答案供您审阅。

说明: 这里的警告实际上是表结构本身。你将不得不使用剩余的身高。这似乎是一种折衷; no-JS需要显式CSS,与JS一样,CSS可以更灵活。

此外,您可以使用另一个类的包装页面上,这样就可以隐藏在上面板并展开下一个像这样:

.wrapper-page.hide-upper .holder > div:first-child { display: none !important; } 
.wrapper-page.hide-upper .holder > div:last-child { height: 100% !important; } 

它可能不是100%,你在找什么,但是根据你对你想要实现的内容的描述,听起来它会做同样的事情。

+0

谢谢,这个原理的工作原理是高度:75%,这是无法使用的,因为在实际应用中,顶部窗格可以被用户折叠,这会增加下部窗格的高度。离开高度是允许表格布局自动调整大小,没有js。谢谢你的尝试。目前,我只是使用JavaScript来计算正确的高度。噢,还有 – helion3

+0

是的,但有趣的问题。也许如果你让他们关闭上面板,向容器中添加一个类,这样它就隐藏了顶部面板并扩展了底部面板? – RedYetiCo