CODEWITHSUNDEEP
css
sooks
sooks

Reputation: 688

css - scrollable child of fixed element

I have a fixed div with 100% height, and within that, a child-div that's relatively positioned. The child-div holds text that can be changed, so it doesn't have a fixed height.

I want the child-div to scroll vertically if its content overflows out of the screen. I played around with the min and max height properties to achieve this, but it isn't an ideal solution, and doesn't always work.

EDIT: min and max height seemed to be ignored, almost. I calculated how much vertical area the textBox would take up for the minimum 'allowable' screen height, and set that as the height. Adding min and max height made no difference to this. The only problem with this solution is that the box is always around ~60%, so even when it doesn't need to scroll, it does. This works, but isn't ideal. If there's a way to get around this it would be great.

This is what I have so far:

<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;
}

Is there a better, more fool-proof way for doing this?

Upvotes: 12

Views: 22294

Answers (3)

Alex Jones
Alex Jones

Reputation: 808

I have found a solution by testing and it seems to work. It requires 3 DIVs. First and uppermost div will be your fixed element. It will contain another div as its child, which will be positioned relatively. It will another div and this div will contain your content, it has to be positioned absolutely

Code: https://codepen.io/ltorvalds024/pen/GxKdeO

Upvotes: 1

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

The following worked perfectly for me:

<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>

The div's content is editable, so just add text until it scrolls. It would work on decent browser.

Live Example

Upvotes: 11

user800014
user800014

Reputation:

Basically You have to set the overflow of your fixed element as you can see in this example, and there's a jsfiddle to play with the possibilities.

Upvotes: 2

Related Questions