嵌套Div不适合容器Div

Question

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

即使我将chartDiv的宽度和高度设置为90％，它也会将滚动条引入chartDiv，或者如果我改变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

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