我正在尝试创建一个小型信息中心应用。由于它将在仪表板上,我想避免不惜一切代价滚动。因此,我将html / body标签的高度/宽度设置为100%,并在其他地方使用百分比,因为我不知道屏幕尺寸。
然而,当我添加内联SVG时,当我在SVG元素上将宽度设置为100%时,它会强制父DIV变大以适应SVG,而不是在它变为较小尺寸时停止。
很难解释,但我做了一个JS小提琴:
https://jsfiddle.net/5khkzgk8/4/
它是应用程序的基本布局。 SVG是一个填充svg的黑色矩形。
svg {
width: 10%;
height: 100%;
}
目前svg宽度为10%,工作正常。如果你将10%的百分比提高10%并看看它的行为方式,你会看到。我想要的(并且会发生这种情况)是,一旦它填满了div的高度(浅蓝色),SVG就会停止放大。发生的事情是它继续扩大直到我们达到宽度= 100%,但现在div太大了你需要滚动。
我非常感谢任何帮助。我只是在前端/ css度过了一个周末的怪人,所以我此刻真的输了。
谢谢!