Question

所以，在角度ui-grid的标题占据整个屏幕高度的问题上，我一直在靠墙打击。

我已将问题简化为一个文件中的一个文件。 http://plnkr.co/edit/XR7OVXjwSodqTNRBAVnv?p=preview

<html>
<head>
    <title>Broken ui-grid</title>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="///ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>

    <script>
        var app = angular.module('sample', ['ui.grid']);
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.js"></script>

    <script>
        angular.module('sample').controller('SampleController', ['$scope', '$timeout', function($scope, $timeout) {
            $scope.uiGridOptions = {
                rowHeight: 36,

                data: [
                    { date: Date.now() / 1000, blah1: "Test data"}
                ]
            };

            $scope.uiGridOptions.columnDefs = [
                { field: "blah1", displayName: "blah", width: 150 }
            ];
        }]);
    </script>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.css"/>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body ng-app="sample" ng-controller="SampleController">
    <div id="dailyGrid" ui-grid="uiGridOptions"></div>
</body>
</html>

有谁能告诉我我做错了什么？

Answer 1

所以经过大约一个小时的搜索和摆弄，我发现了问题。

我需要做的就是解决问题的方法是在文档中添加<!DOCTYPE html>，然后繁荣！问题解决了！

<!DOCTYPE html>
<html>
... code snip ...

Plunkr with fix：http://plnkr.co/edit/6rRIcjaL1yPF6GKRTkUT?p=preview

我怀疑浏览器（谷歌浏览器）是在没有doctype的某些非html5模式下渲染的。我没有意识到doctype和没有doctype之间会有区别。

希望这对其他人也有用。

UI网格标题占用整个页面

1 个答案: