Question

我有一个父div，其溢出-x设置为滚动。我想要一个绝对定位的child-div能够完全覆盖其父级的整个水平可滚动区域。我尝试将子顶部/底部/左/右边缘设置为0或将其宽度设置为100％，但在这两种情况下，子div仅覆盖最初的VISIBLE可滚动区域。

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

这是小提琴： http://jsfiddle.net/hammerbrostime/4e9zU/

Answer 1

这个js会这样做：

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

实际上，您可以找到文本的长度并将其转换为ex来调整内部div的大小。

Answer 2

我害怕你需要js。 jQuery中的scrollWidth属性为您完成。

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

小提琴：http://jsfiddle.net/4e9zU/1/

使一个绝对定位的子div覆盖一个水平滚动的父div

2 个答案: