admin管理员组

文章数量:1023251

I have an anchored popover I want to have dynamic height:

button {
    anchor-name: --test-anc;
}

[popover] {
    position-anchor: --test-anc;
    position-area: bottom span-right;
    position-try-fallbacks: flip-block;
    position-visibility: anchors-visible;

    margin: 0;
    
    border: 1px solid red;
    
    opacity: 0;
    transition: 
        display 300ms ease allow-discrete, 
        opacity 300ms ease;
        
    /* Fade in on open */
    &:popover-open {
        opacity: 1;
        @starting-style { opacity: 0; }
    }
}
<button popovertarget="p">show</button>
<div id="p" popover>
item1<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item
</div>

I have an anchored popover I want to have dynamic height:

button {
    anchor-name: --test-anc;
}

[popover] {
    position-anchor: --test-anc;
    position-area: bottom span-right;
    position-try-fallbacks: flip-block;
    position-visibility: anchors-visible;

    margin: 0;
    
    border: 1px solid red;
    
    opacity: 0;
    transition: 
        display 300ms ease allow-discrete, 
        opacity 300ms ease;
        
    /* Fade in on open */
    &:popover-open {
        opacity: 1;
        @starting-style { opacity: 0; }
    }
}
<button popovertarget="p">show</button>
<div id="p" popover>
item1<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item
</div>

本文标签： CSS anchorAPI a popover element with dynamic heightStack Overflow

版权声明：本文标题：CSS anchor-API a [popover] element with dynamic height - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745517400a2154136.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。