Question

我正在使用Google Charts API，它使用<iframe>呈现图表，但是我想删除底部和顶部的大量空白区域。我一直试图以各种方式做到这一点（如下所述），但似乎无法弄清楚我想要的方式;

我的HTML标记

<div id="chart">
<div id="chart-contents">
<iframe name="Drawing_Frame_49918" id="Drawing_Frame_49918" width="690" height="200"     frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div

<iframe>是通过javascript包含的，因此实际上并不是我标记的一部分;但部分DOM后加载。

我的CSS样式

#chart {
padding-top: 15px;
margin: auto;
width: 690px;
height: 155px;
overflow: hidden;
}

#chart-contents {
    margin-top: -45px;
}

#chart-nav {
    margin-top: 15px;
    padding: 0px 15px;
}

此CSS的目的是将容器元素#chart的高度限制为155px（<iframe>高度为200px），并隐藏溢出。然后#chart-contents被45px向上推，但由于溢出被隐藏，它仍然包含在同一个155px区域内，因此显示了图表的中间和x轴。 / em>的

然而，这似乎不起作用，因为通过设置限制高度和溢出到隐藏来剪切<iframe>的底部部分，尝试#chart-contents向上尝试都失败了。 / p>
到目前为止，我已经尝试过了;

使用否定的top，padding-top和margin-top属性。

将absolute和relative与top一起定位。

将clip属性与relative位置结合使用。

我开始认为如果没有其他元素或javascript，这可能是不可能的？

如何以有效的方式纠正这一问题的任何建议和答案（如果可能的话，最好只坚持现有元素的CSS属性），我们将不胜感激！

如果您需要更多信息或某种可视化，请询问。我会为你解决这个问题，但由于他们的AJAX政策和谷歌使用AJAX的API，这是相当困难的。

Answer 1

您可以随时将前一个元素放在iframe的顶部，这样它看起来比实际更快。这显然适用于iframe之后的元素。

要实现这一目标，您只需要提供元素position: relative。

预览：http://jsfiddle.net/Wexcode/XyVGr/

剪切元素只显示中间部分？

1 个答案: