剑道图表 105% 高度，而不是 100% 高度？答案

【问题标题】：Kendo Charts 105% height, not 100% height?剑道图表 105% 高度，而不是 100% 高度？
【发布时间】：2014-12-31 19:53:47
【问题描述】：

我有下面的图表，它填充了显示器的宽度和高度。高度总是比屏幕大一点，所以会出现一个滚动条，显示底部 20 px 左右。

有没有办法让 Kendo UI 显示 100%，而不是 105% 高度？

在线示例：http://SandApps.com/SOF.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    html {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
    }

    .k-chart { overflow: hidden; }
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div class="chart-wrapper">
<div id="chart" style="height: 100%; min-height: 100%; width: 100%;"> </div>
</div>
<script>
    $(function () {
        $("#chart").kendoChart({
            legend: {
                visible: false
            },
            seriesDefaults: {
                type: "column",
                opacity: .7
            },
            series: [{
                data: [11341.520000, 14677.030000, 0.810000, 27.910000, 4092.410000, 4092.410000, 4115.850000, 6479.210000, 6479.210000, 6482.850000],
                color: "#005984"
            }],
            valueAxis: {
                labels: {
                    format: "{0:C0}"
                },
                line: {
                    visible: false
                }
            },
            categoryAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "{0:C0}",
                template: " #= value #"
            }
        });
    });

    $(window).on("resize", function () {
        kendo.resize($(".chart-wrapper"));
    });

</script>
</body>
</html>

【问题讨论】：

overflow-y: hidden; 用于包装？顺便说一句，在链接页面上看不到任何内容
在包装器上设置 overflow-y hidden 会导致 Kendo 不显示任何内容，呃 :(

标签： javascript jquery css kendo-ui telerik

【解决方案1】：

我发现这是解决方案：

将此添加到 CSS 中：

    html { height:100%; }
    body { height:100%; overflow:hidden; margin:0; padding:0; }

如果您需要适用于 android 和 ios 的 100% 宽度和高度 html 解决方案，这里是完整的 HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<style>
    html {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
    }
    .k-chart { overflow: hidden; }
    html { height:100%; }
    body { height:100%; overflow:hidden; margin:0; padding:0; }
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
 <body>

 <!-- NOTE: Leave the styles here as Kendo will do funny things with a css class -->
<div class="chart-wrapper" style="height: 100%; min-height: 100%; width: 100%;">
<div id="chart" style="height: 100%; min-height: 100%; width: 100%;"> </div>
</div>

 <script>
 $(function() { $("#chart").kendoChart({ legend: { visible: false }, seriesDefaults: { type: "column", opacity: .7 }, series: [{ data: [11341.520000, 14677.030000, 0.810000, 27.910000, 4092.410000, 4092.410000, 4115.850000, 6479.210000, 6479.210000, 6482.850000], color: "#005984" }], valueAxis: { labels: { format: "{0:C0}" }, line: { visible: false } }, categoryAxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"], majorGridLines: { visible: false } }, tooltip: { visible: true, format: "{0:C0}", template: " #= value #" } }); });

$(window).on("resize", function() { kendo.resize($(".chart-wrapper"));  }); 
</script>
</body>
</html>

【讨论】：