寬度為100％的SVG溢出其容器

Question

在下面的代碼段中，添加svg元素會導致出現垂直滾動條。 刪除svg會刪除滾動條。 我想了解它為什么會發生以及是否有一個不太可怕的解決方案（例如寬度：99％;高度：98％解決了它，但這是一個惡心的解決方案）。

我無法真正刪除上部DIV樣式，因為其他html結構也位於需要那些容器的這些容器中。

 .menuquery { border: 1px solid #ccc; overflow: auto; box-sizing: border-box; } .xainnersubformdefault { /* allows the svg to autosize */ width: 100%; height: 100%; } .xadatabox { height: 100%; /* essential for jtable to scroll and not leak */ } .datachart { width: 100%; height: 100%; /* position:relative; */ /* to make an svg fill its container, this is required, see stackoverflow 9566792 */ } svg { width: 100%; height: 100%; border: 1px solid green; box-sizing: border-box; } 

 <div class="menuquery" style="width:300px;height:200px"> <div class="xa xafield xadatabox"> <div class="xainnersubformdefault"> <div class="datachart"> <svg></svg> </div> </div> </div> </div> 

svg上的綠色邊框和盒子尺寸僅在那里，所以我們可以看到svg的邊緣，最后不需要它

如果我將svg更改為div，並使svg css應用於該div，則不會出現滾動條，因此svg元素似乎有些不同。

我在firefox和IE中測試了這個。 兩者都顯示滾動條，但IE顯示更多可滾動的內容

Answer 1

Svg是inline元素，設置font-size: 0; .menuquery將解決這個問題

 .menuquery { border: 1px solid #ccc; overflow: auto; box-sizing: border-box; font-size: 0; } .xainnersubformdefault { /* allows the svg to autosize */ width: 100%; height: 100%; } .xadatabox { height: 100%; /* essential for jtable to scroll and not leak */ } .datachart { width: 100%; height: 100%; /* position:relative; */ /* to make an svg fill its container, this is required, see stackoverflow 9566792 */ } svg { width: 100%; height: 100%; border: 1px solid green; box-sizing: border-box; } 

 <div class="menuquery" style="width:300px;height:200px"> <div class="xa xafield xadatabox"> <div class="xainnersubformdefault"> <div class="datachart"> <svg></svg> </div> </div> </div> </div> 

---

或者你可以設置display:block to svg 。 更新了您的評論 。

 .menuquery { border: 1px solid #ccc; overflow: auto; box-sizing: border-box; } .xainnersubformdefault { /* allows the svg to autosize */ width: 100%; height: 100%; } .xadatabox { height: 100%; /* essential for jtable to scroll and not leak */ } .datachart { width: 100%; height: 100%; /* position:relative; */ /* to make an svg fill its container, this is required, see stackoverflow 9566792 */ } svg { width: 100%; height: 100%; border: 1px solid green; box-sizing: border-box; display:block; } 

 <div class="menuquery" style="width:300px;height:200px"> <div class="xa xafield xadatabox"> <div class="xainnersubformdefault"> <div class="datachart"> <svg></svg> </div> </div> </div> </div> 

Answer 2

刪除overflow: auto; 來自.menuquery ：

 .menuquery { border: 1px solid #ccc; box-sizing: border-box; } .xainnersubformdefault { /* allows the svg to autosize */ width: 100%; height: 100%; } .xadatabox { height: 100%; /* essential for jtable to scroll and not leak */ } .datachart { width: 100%; height: 100%; /* position:relative; */ /* to make an svg fill its container, this is required, see stackoverflow 9566792 */ } svg { width: 100%; height: 100%; border: 1px solid green; box-sizing: border-box; } 

 <div class="menuquery" style="width:300px;height:200px"> <div class="xa xafield xadatabox"> <div class="xainnersubformdefault"> <div class="datachart"> <svg></svg> </div> </div> </div> </div>