12

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

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

编辑：最小和最大高度似乎几乎被忽略了。我计算了文本框对于最小“允许”屏幕高度将占用多少垂直区域，并将其设置为高度。添加最小和最大高度对此没有任何影响。此解决方案的唯一问题是该框始终约为 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;
}

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

4

3 回答 3

13

以下对我来说非常有效：

<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 的内容是可编辑的，所以只需添加文本直到它滚动。它可以在体面的浏览器上运行。

现场示例

于 2012-04-14T20:35:42.067 回答
2

基本上你必须设置你的固定元素的溢出，正如你在这个例子中看到的那样，并且有一个jsfiddle可以发挥这些可能性。

于 2012-04-14T20:09:14.213 回答
1

我通过测试找到了一个解决方案，它似乎有效。它需要 3DIV秒。首先也是最上面div的将是您的固定元素。它将包含另一个div作为它的子元素，它将被相对定位。它将是另一个div，div它将包含您的内容，它必须绝对定位

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

于 2018-06-21T19:59:23.117 回答