<!DOCTYPE html> CSS 个问题

Question

自从添加 <!DOCTYPE html> 之后，我遇到了 css 个问题 -

我知道我知道。我应该从一开始就包含 doctype - 但我没有。我认为问题可能出在网格（复数 - ag-grid）div - 可能与高度有关。为什么我认为这是因为页面的其余部分呈现完美。查询网格时显示没有数据并且高度似乎为 0，un-styled headers.

这是网格 div 的代码 -

<div style="height: 100%; clear: left; width: 100%">

  <div style="min-width: 630px">

    <img ng-show="loaded == false" src="js/angular/assets/img/loading.gif" style="width: 536px; height: 224px; display: block; margin-left: auto; margin-right: auto" />

    <img ng-show="error == true" src="js/angular/assets/img/error.png" style="width: 90px; height: 90px; display: block; margin-left: auto; margin-right: auto" />

  </div>
  <div ng-show="boxDataGrid == true && loaded == true" style="clear: both;">

    <div ag-grid="gridOptions1" class="ag-fresh" ng-style="expanded ? {width: '1550px'} : {}"></div>

  </div>

  <div ng-show="ladderGrid == true && loaded == true" style="clear: both;">

    <div ag-grid="gridOptions4" class="ag-fresh" style="height: 100%; width: 100%"></div>

  </div>

  <div ng-show="ladderDataGrid == true && loaded == true" style="clear: both;">

    <div ag-grid="gridOptions5" class="ag-fresh" style="height: 100%; width: 100%"></div>

  </div>

</div>

是否有任何需要更改的内容？

Answer 1

高度不能是%，你必须手动给它，比如height: 400px;.

Answer 2

如果不给元素属性到 Position:absolute，我们不能给 100% 高度；或 Position:fixed;.所以如果我们不使用它们，我们就不能以 % 为单位给出高度。

现在使用 px 或 em 或任何其他值。

<div style="height: 500px; clear: left; width: 100%">

  <div style="min-width: 630px">

    <img ng-show="loaded == false" src="js/angular/assets/img/loading.gif" style="width: 536px; height: 224px; display: block; margin-left: auto; margin-right: auto" />

    <img ng-show="error == true" src="js/angular/assets/img/error.png" style="width: 90px; height: 90px; display: block; margin-left: auto; margin-right: auto" />

  </div>
  <div ng-show="boxDataGrid == true && loaded == true" style="clear: both;">

    <div ag-grid="gridOptions1" class="ag-fresh" ng-style="expanded ? {width: '1550px'} : {}"></div>

  </div>

  <div ng-show="ladderGrid == true && loaded == true" style="clear: both;">

    <div ag-grid="gridOptions4" class="ag-fresh" style="height: 100%; width: 100%"></div>

  </div>

  <div ng-show="ladderDataGrid == true && loaded == true" style="clear: both;">

    <div ag-grid="gridOptions5" class="ag-fresh" style="height: 100%; width: 100%"></div>

  </div>

</div>

<!DOCTYPE html> CSS 个问题

<!DOCTYPE html> CSS issues

html

css

doctype

angularjs