9

所以，我有#Wrapper一个固定宽度的 DIV。在那个 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/

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

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

所以，给定：

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

#Panel {
    width: 300px;
}

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

一些附加说明：

  1. 我无法直接在 Wrapper 上设置宽度。在我的实际代码中，我在比 Wrapper 高几级的祖先元素上设置了宽度，并使用自定义 API 来设置宽度。这就是为什么我需要检索全部320px价值。

  2. 我想要一个不依赖于 Wrapper 内容的解决方案。在我的演示中，它是一个面板，但在其他情况下，可能会有不同的元素溢出，甚至是多个元素。这就是我.scrollWidth选择 Wrapper 的原因。

有没有一种方法可以获取值320px而无需手动为值添加正确的填充.scrollWidth？

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

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

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

  2. 如果元素是根元素并且 Document 不是 quirks 模式，则返回 max(document content width, value of innerWidth)。

  3. 如果元素是 HTML body 元素并且 Document 处于 quirks 模式，则返回 max(document content width, value of innerWidth)。

  4. 返回“padding-left”属性的计算值，加上“padding-right”的计算值，再加上元素的内容宽度。

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

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

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

(1) 如果标准规定应该在.scrollWidth值中包含正确的填充，那么为什么浏览器不采取相应的行为呢？

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

这个问题已经在另一个帖子里回答了

这个问题的答案在这里：当子元素水平溢出时，为什么忽略了父元素的右填充？

​</p>

4

4 回答 4

1

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

#Wrapper {
    display: inline-block;
    make sure to remove width from #Wrapper
}
于 2012-11-05T13:57:14.010 回答
1

我不知道为什么领先的浏览器直到今天才分享这个错误，但这里有一个问题和解决方法的演示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>

于 2017-12-14T14:21:46.023 回答
0

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

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

这考虑了#Panel' 的填充、边距等。

于 2012-04-06T16:35:42.567 回答
0

尝试这个：

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

或使用 jQuery

$(document).ready(function() {
    var width = jQuery("#Panel").width();
    $("#Wrapper").width(width);
});
于 2012-04-06T15:09:56.217 回答