所以,我有一个固定宽度的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?
答案 0 :(得分:1)
我不确定我是否理解正确,但从我读到的内容来看,我假设您想要根据#Panel更改#Wrapper的宽度。在这种情况下,也许您可以尝试以下方法:
#Wrapper {
display: inline-block;
make sure to remove width from #Wrapper
}
答案 1 :(得分:0)
试试这个:
#Wrapper {
min-width: 200px;
padding: 10px;
float: left;
}
或使用jQuery
$(document).ready(function() {
var width = jQuery("#Panel").width();
$("#Wrapper").width(width);
});
答案 2 :(得分:0)
您可以使用jQuery执行此操作:
$(function() {
$("#Wrapper").width($("#Panel").outerWidth());
});
这会考虑#Panel
的填充,边距等。
答案 3 :(得分:0)
我不知道为什么领先的浏览器会在今天之前共享此错误,但这是一个问题演示和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
+' (fix applied to grand children)<br>four.scrollWidth = '+ document.querySelector('.four').scrollWidth +' (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>