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

我在左邊有一種文件系統樹的佈局，右邊是擴展文件夾和文件以及詳細視圖。佈局是用聚合物完成的，並且它是水平柔性的，並且在兩個容器之間有一箇中心分離器。在聚合物完成的水平佈局中垂直固定一個容器

我的目標是右邊的詳細視圖被垂直固定，以便無論向下滾動多少左邊容器中的樹，它都在視口中。

有沒有辦法做到這一點？

2014-11-21 dacrow28

當然，這是可能的。三件關鍵的事情

在您的父容器上設置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>

來源

2014-11-24 18:17:36

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

回答

相關問題