Question

我正在开发一个Angular应用程序，而css / html现在正在杀了我。以下是我application的常规设置。我想要完成的是使用组件2中的按钮创建中心组件（草图中的组件1）。

那么我的HTML看起来是：

<div>
      <div>
          <cluster-row> </cluster-row>
          <template #placeholder> </template>
      </div>
      <div>
          <button type="button" class="btn btn-lg btn-primary btn-circle (click)="insertClusterRow()"> + </button>
      <div>
</div>

如何在不超出浏览器最大高度的情况下划分component1的中心部分。所以基本上按钮被按下的模板被代码中的实例化component1替换，并将每个中心部分分成最大值为四分之一。

希望我写的内容有意义，草图有助于描绘预期效果。

亲切的问候，

Vitax

Answer 1

对容器使用d-flex，flex-column，w-100和h-100类。对于占用容器中所有可用空间的the component-1 - 组件，请使用flex-grow-1。请注意，您需要使用Boostrap-4.1，因为bootstrap-4.0不具有flex-grow-1。它仅适用于容器的所有父级，包括html和body高度100%。

＆＃13;

<div class="d-flex flex-column w-100 h-100">
  <div class="">title</div>
  <div class="flex-grow-1">Component 1</div>
  <div class="">Component 2</div>
</div>

＆＃13;

一个工作演示。建议你全屏运行。

＆＃13;

<!DOCTYPE html>
<html class="h-100">
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
</head>

<body class="h-100">
  <div class="container-fluid  h-100">
    <div class="row h-100">
      <div class="col-12 d-flex flex-column w-100 p-0 ">
        <div class="bg-success p-3">title</div>
        <div class="flex-grow-1 bg-primary p-3">Component 1</div>
        <div class="bg-info p-3">Component 2</div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

如果容器中有太多父母，请注释，我会告诉你如何使用绝对定位，或者你应该自己尝试一下。

如何动态划分html空间

1 个答案:

一个工作演示。建议你全屏运行。