Question

我知道这个问题已经回答了，但是，我尝试了找到的解决方案，但没有解决我的问题。我正在尝试将容器设置为根据可用内容自动调整其高度。

目前，当内容较短时，容器不会调整，如图2所示：

如果我删除 height：100％并替换为 height：auto ，则容器的高度将填满所有可用空间，而我将看不到滚动条和提交按钮：

如何动态调整容器？

这是我的代码：

<apex:page sidebar="false" showHeader="false" applyHtmlTag="false">
  <html>

  <head>
    <apex:includeLightning />
  </head>

  <body class="slds-scope">
    <style type="text/css">
      body {
        font-family: EF Circular, Helvetica, Open Sans, Arial, sans-serif;
        font-size: 15px !important;
        font-weight: normal;
      }

      .flow {
        width: 700px;
        height: 100%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.9;
        overflow: auto;
        -webkit-box-shadow: 5px 5px 16px -6px rgba(0, 0, 0, 0.77);
        box-shadow: 5px 5px 16px -6px rgba(0, 0, 0, 0.77);
      }

      input {
        /*height: 9px !important;*/
        padding: 6px 6px !important;
        margin-bottom: 5px;
        /*display: block !important; */
        font-size: 12px !important;
        line-height: 16px !important;
        color: #191919 !important;
        background-color: #efefef !important;
        border: 1px solid #009ee8 !important;
        border-radius: 4px !important;
        width: 9cm;
      }

      .slds-scope .slds-input {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(217, 219, 221);
        border-radius: .25rem;
        width: 4.4cm;
        transition: border .1s linear, background-color .1s linear;
        display: inline-block;
        padding: 0 1rem 0 .75rem;
        line-height: 1.875rem;
        min-height: calc(1.875rem + (1px * 2));
      }

      .slds-scope .slds-input-has-icon_right .slds-input__icon,
      .slds-scope .slds-input-has-icon--right .slds-input__icon {
        right: auto;
      }

      select {
        color: #000;
        height: 0.8cm;
        width: 9cm;
      }
    </style>
    <div id="flowContainer" class="flow" />
    <script>
      var statusChange = function(event) {
        if (event.getParam("status") === "FINISHED") {
          var outputVariables = event.getParam("outputVariables");
          var key;
          for (key in outputVariables) {
            if (outputVariables[key].name === "myOutput") {}
          }
        }
      };
      $Lightning.use("c:DLAflow", function() {
        $Lightning.createComponent("lightning:flow", {
            "onstatuschange": statusChange
          },
          "flowContainer",
          function(component) {
            component.startFlow("DLA_Application_Page");
          }
        );
      }, );
    </script>
  </body>

  </html>
</apex:page>

Answer 1

您应该使用height: fit-content;。

Answer 2

将max-height与height:auto;一起使用：

height: auto;
max-height: 100%;

自动调整容器高度以适合内容

2 个答案: