css - 固定元素的可滚动子元素

Question

我有一个高度为 100% 的固定 div，在其中有一个相对定位的子 div。 child-div 包含可以更改的文本，因此它没有固定的高度。

如果内容溢出屏幕，我希望 child-div 垂直滚动。我尝试使用 min 和 max height 属性来实现这一点，但这不是一个理想的解决方案，而且并不总是有效。

编辑:最小和最大高度似乎几乎被忽略了。我计算了 textBox 将占用多少垂直区域以达到最小“允许”屏幕高度，并将其设置为高度。添加最小和最大高度对此没有影响。此解决方案的唯一问题是框总是在 ~60% 左右，因此即使不需要滚动，它也会滚动。这可行，但并不理想。如果有办法解决这个问题，那就太好了。

这是我目前所拥有的:

<div class="content">
    <div id="textbox"> some text
    </div>
</div>

.content { position: fixed; height: 100%; top: 0px; right: 0px; }

#textBox { 
    position: relative;
    top: 165px;
    height: 61.5%;
    overflow-y: auto;
}

有没有更好、更简单的方法来做到这一点？

Answer 1

以下对我来说非常有效:

<style type="text/css">
    #fixed {
        position:   fixed;
        top:        0;
        bottom:     0;
        left:       0;
        right:      0;
        border:     1px solid black;
        overflow:   hidden;
        background: white;
    }

    #scrolling {
        overflow: auto;
        max-height: 98%;
    }
</style>

<div id="fixed">
    <div contenteditable id="scrolling">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
        egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
        ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
        fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non
        enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas
        augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
        facilisis luctus, metus</p>
    </div>
</div>

div 的内容是可编辑的，因此只需添加文本直到它滚动。它可以在体面的浏览器上运行。

Live Example