Question

我有一个带图表的顶部div和底部div在每行末尾包含四行我点击该特定行的关闭图标时有一个关闭图标，所以剩下的行应该在顶部div应该占用剩下的空间如何在css或javascript中完成。我正在使用Angular JS的ng-repeat概念，以便重复行。

Answer 1

如果下面的行数可能会改变，我建议使用flexboxes。在父div（包装图表和行）上：

display: flex;
flex-direction: column;

在图表包装器上：

flex: 1 0 0%;

这将使图表包装器div占用父div的所有剩余空间。如果您想支持旧浏览器，请不要忘记供应商前缀：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

和

-webkit-box-flex: 1 0 0%;
-moz-box-flex:  1 0 0%;
-webkit-flex:  1 0 0%;
-ms-flex:  1  0 0%;

如果您还没有，请花些时间阅读有关flexboxes的更多信息。有些人声称这是多年来添加到CSS中的最好的东西，我不得不同意 - 他们解决了很多布局问题。

如何根据底部div调整顶部div的大小

1 个答案: