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相关文章