UI 网格 header 占据整个页面

Question

所以，我一直在用头撞墙解决 angular-ui-grid 的 header 占据整个屏幕高度的问题。

我已将问题简化为一个文件。 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 修复：http://plnkr.co/edit/6rRIcjaL1yPF6GKRTkUT?p=preview

我怀疑浏览器 (Google Chrome) 在没有文档类型的情况下以某种非 html5 模式呈现。我没有意识到有文档类型和没有文档类型之间会有区别。

希望这对其他人也有用。

UI 网格 header 占据整个页面

UI Grid header taking up entire page

angularjs

angular-ui-grid