"top：100％"の要素の高さが "0"ですか？

Question

私はドロップダウンコンポーネントを作成しようとしています。 （カスタムコンポーネントを使用）。

コンポーネントテンプレート（チャイルズ）：

<input-box icon=right> 
<ic-on art="save"></ic-on> 
</input-box> 
<scroll-bar> 
    <list-items mode="custom"> 
     <div class="list-item" value="${data.value}"> 
      <span>${data.label}</span> 
     </div> 
    </list-items> 
</scroll-bar> 

コンポーネントは属性[open]を取得したときに、スクロールバーの要素を拡大しなければなりません。

だから私はいくつかのスタイルを設定します。リストアイテム要素は88pxの高さを有する

drop-box scroll-bar { 
    position:absolute; 
    left:0px; 
    top : 100%; 
    z-index: 100; 
} 

drop-box:not([open]) scroll-bar { 
    max-height : 0; 
    transition: max-height 0.15s ease-out; 
} 

drop-box[open] scroll-bar { 
    max-height: 500px; 
    transition: max-height 0.15s ease-in; 
} 

が、スクロールバーを私はtop : 100%スクロールバーは高さを取得削除すると0

にとどまります間違った位置にある。

インターネットを検索しているので、静かにしばらくの間tryedしても解決策が見つかりませんでした。

すべてのアイデア？

ヘルプは大幅に評価されます。

Answer 1

代わりドロップボックスのスクロールバーであなたの現在のスタイルのコードでこれを使用してみてください：

drop-box scroll-bar { 
    position: absolute; 
    left:0; 
    top: 0; 
    height: 100%; 
    z-index: 100; 
} 

しかし、あなたはCSSプロパティでスクロールバーを追加することができます。

element{ 
    overflow: scroll; 
} 

element::-webkit-scrollbar { 
    width: 1em; 
} 

element::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 

element::-webkit-scrollbar-thumb { 
    background-color: darkgrey; 
    outline: 1px solid slategrey; 
} 

〜ジュリアン