为什么当改变浏览器窗口时div元素没有扩展到原始大小？

问题描述 投票：0回答：1

这是 HTML 

<div class="analysis-area"><div class="chart-wrapper"><div class="chart-panel"><p-chart #pAccuracyChart type="bar" [data]="accuracyChartData" width="500px" height="100%" [responsive]="true" [options]="accuracyChartOptions"></p-chart></div>

    <div class="accuracyChart">
        <p-chart #pAccuracyChart type="bar" [data]="accuracyChartData" width="500px" height="100%" [responsive]="true" [options]="accuracyChartOptions"></p-chart>
     </div>
  </div>
<div class="table-wrapper">
   <div class="data-table"></div>
   <div class="staticalTbl">/div>                  
</div>

这是CSS

.analysis-area{
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction:column;

.chart-wrapper{
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;

.chart-panel{
    width: 50%;
    height: 100%;
 }        

.accuracyChart{
            width: 50%;
            height: 100%;
         }
     }

     .table-wrapper{
        width: 100%;
        height: 40%;
        display: flex;
        flex-direction: row;
            .data-table{
               height: 100%;
               width: 50%;
            }
       .staticalTbl{
          height: 100%;
          width: 50%;
        }
     }
  }

父 div 包含一个分析区域，其中包含 

chart-wrapper
和 
table-wrapper
元素。 
chart-wrapper
包含两个 PrimeNG 图表。

当浏览器窗口大小发生变化时，

chart-wrapper
应展开，并且 
table-wrapper
应占据剩余空间。

使用

p-chart
时出现问题。当我缩小时，图表会变大，因为 
chart-wrapper
正在扩大，但 
p-chart
的高度不会改变。

但是，如果我使用具有属性 

div
和 
width: 100%
的空 
height: 100%
元素，则没有问题。

html css angular angularjs
1个回答
0
投票

缺少关闭 div 标签：

<html>

<head>
  <title>Page Title</title>
  <style>
  
  .analysis-area{
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction:column;

.chart-wrapper{
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;

.chart-panel{
    width: 50%;
    height: 100%;
 }        

.accuracyChart{
            width: 50%;
            height: 100%;
         }
     }

     .table-wrapper{
        width: 100%;
        height: 40%;
        display: flex;
        flex-direction: row;
            .data-table{
               height: 100%;
               width: 50%;
            }
       .staticalTbl{
          height: 100%;
          width: 50%;
        }
     }
  }
*{
  border:1px solid gray;
}
  </style>
</head>

<body>

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>


  <div class="accuracyChart">
    <p-chart #pAccuracyChart type="bar" [data]="accuracyChartData" width="500px" height="100%" [responsive]="true" [options]="accuracyChartOptions"></p-chart>
 
  </div>
  <div class="table-wrapper">
    <div class="data-table"></div>
    <div class="staticalTbl"></div>
  </div>

</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.