私はライトボックスに取り組んでいます。コンテンツに基づいて動的にサイズを変更する必要があります。しかし、画面の中央に配置する必要もあります。私はこのようなことを試みています:
HTML:
<div class="lightbox-background">
<div class="lightbox">
LIGHTBOX CONTENT
</div>
</div>
CSS:
.lightbox-background {
background-color: rgba(0,0,0,0.9);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 50;
}
.lightbox {
background-color: white;
width: 780px;
z-index: 100;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: auto !important;
max-height: 90%;
}
私はそれを機能させることができませんでした。可能であれば、JS の使用は避けたいと思います。どうすればいいですか?