Question

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

我希望child-div在其内容溢出屏幕时垂直滚动。我玩了最小和最大高度属性来实现这一点，但它不是一个理想的解决方案，并不总是有效。

编辑：几乎没有忽略最小和最大高度。我计算了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

Answer 2

基本上你必须设置固定元素的溢出，正如你在this example中看到的那样，并且有jsfiddle来发挥可能性。

Answer 3

我通过测试找到了一种解决方案，它似乎可以工作。它需要3 DIV秒。 div的第一个和最后一个是您的固定元素。它将包含另一个div作为其子元素，该子元素将相对地定位。它将另外div，并且此div将包含您的内容，必须绝对

代码：https://codepen.io/ltorvalds024/pen/GxKdeO

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

3 个答案: