嵌套的div不能很好地安装到容器Div

Question

我有一个在另一个容器div（panelContainer）中创建的dojox图表（chartDiv）。

尽管我将chartDiv的宽度和高度设置为90％，但它要么将滚动条引入到ChartDiv中，要么我将dtart更改为ChartDiv的填充和边距设置，它会溢出父容器。

我知道这将是一个基本问题，但我一直在玩很多不同的CSS设置，但似乎没有解决方案将chartDiv保留在panelContainer的范围内（占用95％的空间）

This fiddle可能会帮助你发现哪里出了问题。

Answer 1

当你制作一个没有宽度/高度的图表（或者dojox.gfx画布）时，它会尽量从你放入的容器中确定它的尺寸。虽然它可能会让人困惑！

在你的小提琴的情况下，#chart有一个已知的宽度，因为它是一个块元素并从panelBG继承其宽度，这是panelContainer宽度的100％。

虽然#chart div并没有真正的高度，因为块元素的高度为0px，直到您放入某些东西（或添加了某种样式）。因此，（我认为）图表简单地假定与宽度成一定比例的高度。

在你的CSS中，我看到你有一个宽高为90％的#chartDiv规则。我猜你打算成为#chart。这实际上并不能完全解决问题！

假设您更改了该图表，现在图表会使用90％x90％作为宽度/高度，但如果您尝试此操作，则会看到标签/坐标轴仍位置不正确。

因为您已将标题容器浮动到左侧，图表容器将从同一“行”开始，并尝试将其内容围绕标题容器“浮动”。这使轴标签偏离了位置（绿色），而实际图表（svg/canvas，粉色）落在标题容器下方。

为了解决这个问题，告诉图表容器保持清晰的彩车两侧：

#chart { 
    width: 90%; 
    height: 90%; 
    clear: both; 
} 

这是不是真的有必要，虽然任何浮动，高度设置为90 ％并不总是理想的。我在更新的小提琴中提出了一个建议：http://fiddle.jshell.net/froden/WsrHs/4/。

不同之处在于标题容器是跨越顶部的div，而图表容器是绝对定位的，因此它可以填充下面留下的任何空间。然后，您可以在panelContainer上设置宽度/高度。

Answer 2

将绝对定位的元素从正常流程中取出。这就是为什么一些元素正在扩展到容器之外的原因。我也有一种感觉，那就是你的花车也参与其中，但小提琴有点太复杂，需要制作一个简单的版本。