問題與聚合物佈局和「位置是：固定」

我想有一個分割佈局，其中左側是項目的列表，右側可以顯示有關所選項目的其他信息。

我試着用下面（簡化）的代碼來實現這一目標：

<body fullbleed vertical layout> 

    <style type="text/css"> 
    .card_container { 
     margin: 16px; 
     position: relative; 
    } 
    .details_container { 
/* position: fixed; 
*/ } 
    .white-bg { 
     background-color: white; 
     margin: 8px; 
     max-width: 650px; 
    } 
    .white-bg.details { 
     margin: 24px 24px; 
    } 
    </style> 

    <div layout horizontal center-justified> 
    <div id="card_container" class="card_container" layout vertical> 
     <div class="white-bg"> 
     <h1>Title</h1> 
     </div> 
     <div class="white-bg"> 
     <h1>Title</h1> 
     </div> 
     <div class="white-bg"> 
     <h1>Title</h1> 
     </div> 
     <div class="white-bg"> 
     <h1>Title</h1> 
     </div> 
    </div> 

    <div class="details_container" layout vertical flex> 
     <div class="white-bg details" flex relative> 
     <p>Some sample text...</p> 
     </div> 
    </div> 
    </div> 

</body>

佈局看起來相當不錯，直到我給你position: fixed到details_container股利。

我創建了一個演示問題的JSBin：http://jsbin.com/ziqayufojeco/2/edit?html,output 只需取消註釋position: fixed;屬性。

任何想法如何解決這個問題？

來源

2014-09-13 mackcmillion

我實際上並不知道規格說明的內容，但我不驚訝您不能使用flex與position: fixed的組合。

flex屬性（它是CSS flex屬性的簡寫）告訴CSS如何定位和調整元素相對於它的兄弟元素的大小。 OTOH，position: fixed告訴CSS你希望該元素被非常明確地定位。

我可以理解，無論position: fixed是什麼，您都希望計算出來的尺寸相同，但不會這樣。我想提出一個替代方案，但我無法弄清楚你以後的結果。

來源

2014-09-13 17:52:41

問題與聚合物佈局和「位置是：固定」

回答

相關問題