Make an absolutely positioned child div cover a horizontally-scrolling parent div

1
votes

I have a parent div that has overflow-x set to scroll. I'd like an absolutely positioned child-div to be able to completely cover the entire horizontally-scrollable area of its parent. I have tried setting the child top/bottom/left/right edges to 0 or setting its width to 100%, but in both cases it the child div will only cover the initially VISIBLE scrollable area.

HTML:

<div class="outerScroll">
    <div class="innerOverlay">&nbsp;</div>
    I would like the blue .innerOverlay div to extend fully to the right of the .outerScroll div
</div>

CSS:

.outerScroll { 
    overflow-x:scroll; 
    height:100px; 
    width:150px;
    background-color:rgba(0,0,155,0.5);
    white-space: nowrap; 
    position:relative;
}
.innerOverlay {
    position:absolute; 
    background-color:rgba(155,255,255,0.5);
    top:0; left:0; right:0; bottom:0;
 }

Here is the fiddle: http://jsfiddle.net/hammerbrostime/4e9zU/

2
htmlcssoverflow
CSS doesn't know what's visible. You'll need to use JavaScript to do this. - Diodeus - James MacFarlane

2 Answers

2
votes

This js will do it:

var elements = document.getElementsByClassName('outerScroll')[0].innerText;
var resize = elements.length + "ex";
document.getElementsByClassName('innerOverlay')[0].style.width = resize;

Effectively, you're finding the length of the text and transforming it into ex to size the inner div.

1
votes

You need js for that I'm afraid. The scrollWidth property in jQuery does it for you.

$('.innerOverlay').css('width', $('.outerScroll')[0].scrollWidth);

Fiddle: http://jsfiddle.net/4e9zU/1/