CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 固定元素的可滚动子元素大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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;
}

这样做有更好,更简单的方法吗?

解决方法

以下对我来说非常有用:
<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

大佬总结

以上是大佬教程为你收集整理的css – 固定元素的可滚动子元素全部内容,希望文章能够帮你解决css – 固定元素的可滚动子元素所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。