2

親の高さが vh 単位を使用して定義されている別の div 内に div を配置しようとしています。

基本的に、私がする必要があるのは、child height = parent height - 50px. 親の最大高さは、画面の高さの 80% にする必要があります。子の高さには、長いコンテンツを表示するためのスクロールバーが必要です。

いくつかの異なることを試しましたが、何も機能しないようです。

これは私が試したものです：

.wrapper {
    background: yellow;
    max-height: 80vh;
    width: 300px;
}

.body {
    background: pink;
    position: absolute;
    bottom: 50px;
    overflow-y: auto;
    top: 0;
}

http://jsfiddle.net/qLhhk46n/

何か考えはありますか？ありがとう

4

2 に答える 2

1

calc を使用することが解決策ですが、ラッパーに 80vh の最大高さを指定しました。子要素が小さくなると、親要素はそのサイズに調整されます (親要素を子要素よりも大きくしたくない場合は、子要素を 50px 小さくします)意味がないでしょう）。したがって、max-height から height に変更する必要があります。リンク

.wrapper {
    background: yellow;
    height: 80vh;
    width: 300px;
}

.body {
    background: pink;
    position: relative;
    overflow-y: auto;
    height: calc(80vh - 50px);
    height: -webkit-calc(80vh - 50px);
    height: -moz-calc(80vh - 50px);
    height: -o-calc(80vh - 50px);
    height: -ms-calc(80vh - 50px);
}

.wrapper のパディングもそれを行います。

于 2014-12-29T18:47:44.600 に答える