javascript - 如何在溢出的情况下自动增加相对div的宽度？

Question

我有一个带有 position:absolute 的 div。在那个 div 里面，我想以编程方式添加一些小的 div。所以我调整了overflow-x:scroll。

现在我想在那些小 div 的顶部有一个 div(图片中的 antiquewhite 彩色 div)。我调整了它的“宽度:100%”。但是当我向右滚动以查看隐藏内容时，我发现 div 无法将其宽度调整为 100%。

当我使用浏览器的放大镜并更改 View 大小时，也存在此问题。

我该如何解决这个问题？

这是代码。 HTML 部分:

<div class='container'>
<div class='convas'>
  <div class='top'>

  </div>
  <div class='bottom' id='parent'>
  </div>
</div>
</div>

CSS 部分:

.container{
  margin:10px;
  width:100%;
  position:relative;
}
.convas{
  border: 1px solid #000;
  height:200px;
  width:90%;
  position:absolute;
  top:0;
  left:0;
  overflow-x:scroll;
  }
  .top{
    width:100%;
    height:100px;
    border-bottom: 2px solid #000;
    background-color: antiquewhite;
  }
  .bottom{
  }
 .cell{
      border: 1px dashed #050505;                 
      width:20px;
      height:80px;
      position:absolute;
      left:0px;
      top:100px;  
  }

和 JavaScript 部分:

var parent = document.getElementById('parent');
console.log(parent);
for(var i=1; i<50;i++){
    let elem = document.createElement("div");
  elem.className = 'cell';
    elem.style.left = i* 20 +'px';
  elem.innerText = i;
  parent.appendChild(elem);
}

下面是运行示例:https://jsfiddle.net/mjza/9nzzwxf4/1/

提前致谢。

Answer 1

请参阅下面的代码片段或此处的 jsfiddle > jsfiddle

所以我计算了所有 cells 的宽度总和。然后将该宽度赋予 .top div

此计算是在窗口调整大小时进行的。为了在页面加载时也能实现这一点，我在页面加载时调用了 resize() 函数。

如果有帮助请告诉我

var parent = document.getElementById('parent');
console.log(parent);
for(var i=0; i<50;i++){
	let elem = document.createElement("div");
  elem.className = 'cell';
	elem.style.left = i* 20 +'px';
  elem.innerText = i;
  parent.appendChild(elem);
}
$(window).on("resize", function () {
    var totalWidth = 0;
    $('.convas .cell').each(function() {
        totalWidth += Number($(this).width());
    });
   $('.top').width(totalWidth)   
}).resize();

.container{
  margin:10px;
  width:100%;
  position:relative;
}
.convas{
  border: 1px solid #000;
  height:200px;
  width:90%;
  position:absolute;
  top:0;
  left:0;
  overflow-x:scroll;
  }
  
  .top{
    width:100%;
    height:100px;
    border-bottom: 2px solid #000;
    background-color: antiquewhite;
  }
  .bottom{
  }
 .cell{
      border: 1px dashed #050505;                 
      width:20px;
      height:80px;
      position:absolute;
      left:0px;
      top:100px;  
  }
  
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='convas'>
  <div class='top'>

  </div>
  <div class='bottom' id='parent'>
  </div>
</div>
</div>