css - max-height 100 および margin bottom

Question

コンテンツに合わせて高さが可変で、高さが最大の固定要素を作成したいと思います。

今、私はこのテクニックを使用しています：

#element{
    position:fixed;
    top:50px;
    bottom:50px;
}

それはそれでいいのですが、コンテンツがこの高さよりも小さい場合は高さを小さくしたいのですが... max-heightのようなものをmargin-bottomで作りたいと思っています。

Answer 1

max-height: 500px;たとえば、要素の高さを 500 ピクセルにします (内容が短い場合はそれよりも短くします)。max-height の詳細については、 https://developer.mozilla.org/en-US/docs/CSS/max-heightを参照してください。overflow: scroll;たとえば 、おそらくオーバーフローも指定する必要があります。

これがあなたが望むもののように聞こえます：

#element{
    height: 100%;
    max-height: 500px;
    margin-bottom: 100px;
}

ポジショニング仕様を削除したことに注意してください。

これがうまくいかない場合は、希望する結果の詳細と、これまでに取得したすべての HTML と CSS を提供してください。