Question

我正在使用jquery .tabs（）来显示图形（每个标签一个）。当我加载页面时，第一个选项卡显示的图表与应该完全一致。当我点击任何其他选项卡时，图表完全被压缩到大约30px宽。我有我的CSS设置，以便图形宽度应为100％。当我单击inspect元素时，图形会扩展以填充整个空间。如果我然后单击下一个选项卡，或者返回到原始选项卡，图表将再次压缩，直到我检查它们。如果我将我的CSS中的宽度设置为精确的宽度而不是100％，那么它们就会很好。但是，我希望我的页面能够响应屏幕大小，因此这不是我想要的选项。这是html和javascript：

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
    });
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">APIXU</a></li>
        <li><a href="#tabs-4">Open Weather Map</a></li>
        <li><a href="#tabs-5">Weather Underground</a></li>
    </ul>
    <div id="tabs-1">
        <div id="div7" class="errorChart"></div>
    </div>
    <div id="tabs-4">
        <div id="div8" class="errorChart"></div>
    </div>
    <div id="tabs-5">
        <div id="div9" class="errorChart"></div>
    </div>
</div>

图形绘制在“div7”，“div8”和“div9”div中。如果我的css设置如下：

div.errorChart{
    min-width: 500px;
    height: 450px;
}

然后图表是合理的尺寸，但是不要超出500px，即使我的屏幕上的可用空间大约是1000像素。（如果我单击inspect元素，那么它们会展开。）如果我像这样设置css：

div.errorChart{
    width: 100%;
    height: 450px;
}

然后图表完全被挤压，直到我检查它们。有谁知道为什么会这样？我是否必须将宽度设置为固定数字，还是有办法保持响应？

jquery选项卡不是全宽

0 个答案: