此问题已在另一个帖子

Question

所以，我有一个固定宽度的DIV #Wrapper。在那个DIV中，我有另一个DIV #Panel，它也有一个固定的宽度：

<div id="Wrapper">
    <p>...</p>
    <div id="Panel">Panel</div>
    <p>...</p>
</div>

有时，Panel的宽度大于Wrapper的宽度，在这种情况下，我想通过JavaScript扩展Wrapper，以便它完美地包裹Panel。

现场演示： http://jsfiddle.net/H6rML/

我打算在Wrapper上使用.scrollWidth来确定Panel的宽度。但是，问题是Wrapper有水平填充，.scrollWidth由于某种原因只包括包装的左边填充。所以：

Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width

所以，给定：

#Wrapper {
    width: 200px;
    padding: 10px;        
}

#Panel {
    width: 300px;
}

Wrapper.scrollWidth返回310px，这不是很有用。如果.scrollWidth没有包含任何填充并仅返回Panel的宽度，我可以使用它（我会手动将填充添加到该值）。如果两个填充都包含在内，我也可以使用它。但为什么只包括左边填充？（顺便说一句，这种行为似乎是跨浏览器。）

一些补充说明：

我无法直接在Wrapper上设置宽度。在我的实际代码中，我在一个祖先元素上设置宽度，该元素比Wrapper高几级，我使用自定义API来设置宽度。这就是我需要检索完整320px值的原因。
我想要一个不依赖于Wrapper内容的解决方案。在我的演示中，它是一个Panel，但在其他情况下，可能会有一个不同的元素溢出，甚至是多个元素。这就是我在Wrapper上使用.scrollWidth的原因。

有没有办法获得值320px，而无需手动将正确的填充添加到.scrollWidth值？

顺便说一下，根据标准，应该包括正确的填充：

scrollWidth属性必须返回运行这些的结果   步骤进行：



如果元素没有任何关联的CSS布局框，则返回零并终止这些步骤。



如果元素是根元素且Document未处于怪癖模式，则返回max（文档内容宽度，innerWidth的值）。



如果元素是HTML body元素且Document处于quirks模式，则返回max（文档内容宽度，innerWidth的值）。



返回“填充左”属性的计算值，加上的“填充 - 右”的计算值，加元素的含量宽度。

来源：http://www.w3.org/TR/cssom-view/

为什么浏览器的行为不相应？

为了进一步提高帖子的清晰度，让我总结两个主要问题：

（1）如果标准声明右侧填充应包含在.scrollWidth值中，那么为什么浏览器不会相应地运行？

（2）是否可以检索正确的值（在我的情况下为320px），而无需手动添加正确的填充？

此问题已在另一个帖子

这个问题的答案位于：When a child element overflows horizontally, why is the right padding of the parent ignored?

Answer 1

我不确定我是否理解正确，但从我读到的内容来看，我假设您想要根据#Panel更改#Wrapper的宽度。在这种情况下，也许您可以尝试以下方法：

#Wrapper {
    display: inline-block;
    make sure to remove width from #Wrapper
}

Answer 2

试试这个：

#Wrapper {
    min-width: 200px;
    padding: 10px;
    float: left; 
}

或使用jQuery

$(document).ready(function() {
    var width = jQuery("#Panel").width();
    $("#Wrapper").width(width);
});

Answer 3

您可以使用jQuery执行此操作：

$(function() {
    $("#Wrapper").width($("#Panel").outerWidth());
});

这会考虑#Panel的填充，边距等。

Answer 4

我不知道为什么领先的浏览器会在今天之前共享此错误，但这是一个问题演示和inline-block解决方法。

document.body.innerHTML += 'one.scrollWidth = '+ document.querySelector('.one').scrollWidth 
                          +'<br>two.scrollWidth = '+ document.querySelector('.two').scrollWidth
                          +'<br>three.scrollWidth = '+ document.querySelector('.three').scrollWidth
                          +'&nbsp;&nbsp;&nbsp;(fix applied to grand children)<br>four.scrollWidth = '+ document.querySelector('.four').scrollWidth +'&nbsp;&nbsp;&nbsp;(fix applied to direct child)';

.parent{
  border:1px solid rgba(50,150,220,1);
}
.child{
  background:rgba(100,200,255,0.3);
  padding:10px 20px;
  white-space:nowrap;
}
.scroll-container{
  border:1px solid red;
  display:inline-block;
  overflow:hidden;
}
.two, .three, .four{
  width:60px;
}
.three .child{
  display:inline-block;
}
.four .parent{
  display:inline-block;
}

<div class="scroll-container one">
  <div class="parent">
    <div class="child">Lorem ipsum dolor</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
  </div>
</div>
<br>
<div class="scroll-container two">
  <div class="parent">
    <div class="child">Lorem ipsum dolor</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
  </div>
</div>
<br>
<div class="scroll-container three">
  <div class="parent">
    <div class="child">Lorem ipsum dolor</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
  </div>
</div>
<br>
<div class="scroll-container four">
  <div class="parent">
    <div class="child">Lorem ipsum dolor</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
  </div>
</div>
<br>

为什么scrollWidth只包含左边距？

此问题已在另一个帖子

4 个答案: