在聚合物完成的水平布局中垂直固定一个容器

问题描述：

我在左边有一种文件系统树的布局，右边是扩展文件夹和文件以及详细视图。布局是用聚合物完成的，并且它是水平柔性的，并且在两个容器之间有一个中心分离器。在聚合物完成的水平布局中垂直固定一个容器

我的目标是右边的详细视图被垂直固定，以便无论向下滚动多少左边容器中的树，它都在视口中。

有没有办法做到这一点？

答

当然，这是可能的。三件关键的事情

在您的父容器上设置fit，以便容器将占用整个视口。
在您的<core-splitter>上设置allowOverflow。
风格左侧面板overflow-y: auto。

这里有一个工作示例：

<!doctype html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Polymer Demo: core-splitter</title> 
 
    
 
    <style> 
 
     #left { 
 
     overflow-y: auto; 
 
     } 
 
    </style> 
 
    </head> 
 
    
 
    <body fullbleed> 
 
    <script src="//www.polymer-project.org/webcomponents.js"></script> 
 
    <link rel="import" href="//www.polymer-project.org/components/core-splitter/core-splitter.html"> 
 
    
 
    <div layout horizontal fit> 
 
     <div id="left"> 
 
     <ul> 
 
      <li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li><li>Blah</li> 
 
     </ul> 
 
     </div> 
 

 
     <core-splitter direction="left" minSize="128px" allowOverflow></core-splitter> 
 

 
     <div id="right"> 
 
     <h1>I'm right!</h1> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

在聚合物完成的水平布局中垂直固定一个容器

相关推荐