1

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

即使我将 chartDiv 的宽度和高度设置为 90%，它也会在 chartDiv 中引入滚动条，或者如果我更改 ChartDiv 的填充和边距设置，它会溢出到父容器之外。

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

在此处输入图像描述

这个小提琴可能会帮助你发现我哪里出错了。

4

2 回答 2

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 上设置宽度/高度。

于 2012-12-16T17:50:22.633 回答
0

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

于 2012-12-16T03:37:29.653 回答