從百分比中排除滾動條的尺寸？

考慮：
- 元素parent，child1，child2
- child2有height和overflow集，這樣它的內容會出現一個垂直滾動條
- child1和child2都有用百分比

看來，child2的寬度的100％不包括垂直滾動條（在Chrome中進行測試，但理想情況下我想要一個跨瀏覽器解決方案）。換句話說：從百分比中排除滾動條的尺寸？

TL; DR

如果只parent.child1一個和parent.child2具有垂直滾動條，則child1子元件具有不同的計算寬度比child2子元素。

我怎麼能安排parent，child1，child2，並且使寬度使用的child1百分比計算和child2是相同的child1和child2任何孩子？

解決方案可以使用背景圖層等的絕對定位技巧和「現代」（即不是廣泛支持）的HTML5/CSS3。

請謝謝！

來源

2011-12-28 taz

它似乎[爲我工作]（http://jsfiddle.net/SQfka/）。你會如何改變這一點？ – FakeRainBrigand 2011-12-28 15:05:07

@FakeRainBrigand關於[你發佈的jsfiddle]的鏈接（http://jsfiddle.net/SQfka/），你沒有用我原來的文章中描述的'child1'和'child2'的_child_元素進行測試。當我在瀏覽器上運行你的小提琴時，我得到了'parent'，'child1'和'child2'的寬度495px。看看[我的更新版本的小提琴]（http://jsfiddle.net/JJhay/1/），它顯示我正在談論的行爲。當'parent'爲495px時，'child1'爲495px，'child2'爲495px，但'child1a'爲478px，'child2a'爲495px。我希望'child1a'的寬度爲100％，以減少滾動條寬度。 – taz 2011-12-28 19:34:13

它看起來像你需要「雙包」的孩子，這樣你的工作方式一直如何，將width s應用到外層，將height/overflow應用到內層。

<div id="wrap"> 
    <div id="child-1" class="outer"> 
     <div class="inner"> 
     <!--- HTML goes here --> 
     </div> 
    </div> 
    <div id="child-2" class="outer"> 
     <div class="inner"> 
     <!--- HTML goes here --> 
     </div> 
    </div> 
</div> 

#child-1 { width:60%; } 
    #child-1 .inner { height:100px; overflow:auto; } 
#child-2 { width:40%; }

來源

2011-12-28 15:02:50 Marcel

從百分比中排除滾動條的尺寸？

回答

相關問題