1. 首页
  2. 问答
  3. 灵活的居中对话框使用带有滚动区域的flexbox

灵活的居中对话框使用带有滚动区域的flexbox

2016-07-14 23 views
3

TL; DR - 如果您正在寻找快速复制/粘贴答案，代码位于此问题的底部。灵活的居中对话框使用带有滚动区域的flexbox

我一直在尝试至少一天，尝试获得我创建的flexbox对话框，以正确剪辑/滚动它的内容。

基本上我想要创造的是：

enter image description here

对话框覆盖（阴影画面）是100vh/100vw和z下令任何内容的坐前面已经在页面上，它被设置为显示：flex居中，所以它的唯一子对象（对话框）始终位于页面的中心，无论它的大小如何，实现此目的的2个css规则如下：

.dialogOverlay { 
    z-index: 600; 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100vh; 
    width: 100vw; 
    background-color: rgba(0,0,0,0.4); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.dialogBase { 
    position: relative; 
    min-width: 120px; 
    min-height: 120px; 
    max-width: 75%; 
    max-height: 75%; 
    overflow: hidden; 
    background-color: white; 
    border: 1px solid black; 
    z-index: 601; 
}

对话框的大小有最小为120px×120px，不得超过页面宽度或高度的75％。

这一点都很好，而且正如预料一旦对话框达到最大尺寸，任何溢出的内容都被隐藏起来。

在“dialogBase”里面有一个对话框内容体，它被设置为显示：flex，这样它的两个孩子（标题栏和内容区域）按照行的顺序堆叠在一起。

标题栏有一个固定的高度，也是一个弹性容器（因为它有3个孩子，标题文本和2个图标）。

剩余的对话框体是flex：1，以便它使用剩余的空间，并且这一切都可以很好地工作。如果我使用内容填充对话框主体，则会强制要扩展的对话框的大小以及在最大大小时隐藏内容。

这些项目的CSS如下：

.dialogContentBody { 
    z-index: 602; 
    display: flex; 
    -ms-flex-direction: column; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
} 

    .dialogContentBody .titleBar { 
     background-color: #6e6e6e; 
     color: white; 
     height: 50px; 
     width: 100%; 
     border-bottom: 1px solid black; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
    } 

    .dialogContentBody .bodyContent { 
     overflow-y: scroll; 
     background-color: yellow; 
     flex: 1; 
    }

问题不过是我想要的主体内容滚动一次y方向达到最大高度，因为有些时候的内容加入到“ bodyContent“会导致溢出，但是不管我怎么努力，我都无法以任何方式让溢出给我一个滚动条。

现在我已经解决了可滚动的主体内容，但是最终我想实现的目标是为身体内容区域提供完整的宽度/高度div，该区域具有固定宽度的侧栏， flex 1可滚动的内容区域。

我一直使用至今的HTML是：

<div class="dialogOverlay" data-bind="visible: isOpen"> 

    <div class="dialogBase"> 

      <div class="dialogContentOverlay" data-bind="visible: isBlocked"> 
       <loadspinner params="{fontAwesomeSize: 5}"></loadspinner> 
      </div> 

      <div class="dialogContentBody"> 

       <div class="titleBar"> 
        <div class="titleContent" data-bind="text: pageTitle"></div> 
        <div class="iconContent okIcon"> 
         <i class="fa fa-check-circle" data-bind="click: handleOkButton"></i> 
        </div> 
        <div class="iconContent closeIcon"> 
         <i class="fa fa-times-circle" data-bind="click: handleCloseButton"></i> 
        </div> 
       </div> 

       <div class="bodyContent" data-bind="component: { name: bodyContentComponentName , params: bodyContentComponentParams}"></div> 

      </div> 

    </div> 

</div>

警告是的，他们是淘汰赛，因为我用KO组件架构这里的HTML“数据结合”， “bodyContentComponentName”最终将成为我正在讨论的内容，并将从独立组件集中注入。但是现在，我们可以想象该div内还有其他内容。

我知道的一件事是，'overflow：hidden'absolutley必须保存在“dialogBase”上，因为如果没有，所有东西都会溢出到屏幕底部。然而，有趣的是，如果隐藏溢出被移除，并且允许内容溢出对话框到屏幕底部，则内容中的任何溢出滚动仍然不能正常工作。

任何人都可以帮助的帮助，或任何想法，使这项工作非常感谢。

辣妹

更新（约10分钟后）

埃文IF我减少东西以下最简单的可能的情况下用500px的固定高度，我还是不能让对话体滚动：

<style> 
    .dialogOverlay { 
     z-index: 600; 
     position: absolute; 
     left: 0; 
     top: 0; 
     height: 100vh; 
     width: 100vw; 
     background-color: rgba(0,0,0,0.4); 
     display: flex; 
     justify-content: center; 
     align-items: center; 
    } 

    .dialogBase { 
     position: relative; 
     min-width: 120px; 
     max-width: 75%; 
     overflow: hidden; 
     height: 500px; 
     background-color: white; 
     border: 1px solid black; 
     margin: 10px; 
     z-index: 601; 
    } 

    .bodyContent { 
     background-color: yellow; 
     overflow-y: scroll; 
    } 

</style> 

<div class="dialogOverlay" data-bind="visible: isOpen"> 

    <div class="dialogBase"> 

     <div class="bodyContent" data-bind="compinent: { name: bodyContentComponentName , params: bodyContentComponentParams}"> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
      <h1>Body content, Body Content</h1> 
      <p>body content</p> 
     </div> 

    </div> 

</div>

更新以下Micheal_B的回答

增加100％至DOC人体的直到没有启用滚动条

<style> 
    .dialogOverlay { 
     z-index: 600; 
     position: absolute; 
     left: 0; 
     top: 0; 
     height: 100vh; 
     width: 100vw; 
     background-color: rgba(0,0,0,0.4); 
     display: flex; 
     justify-content: center; 
     align-items: center; 
    } 

    .dialogBase { 
     position: relative; 
     min-width: 120px; 
     //min-height: 120px; 
     max-width: 75%; 
     //max-height: 75%; 
     overflow: hidden; 
     height: 500px; 
     background-color: white; 
     border: 1px solid black; 
     margin: 10px; 
     z-index: 601; 
    } 

    .dialogContentBody { 
     z-index: 602; 
     display: flex; 
     -ms-flex-direction: column; 
     -webkit-flex-direction: column; 
     flex-direction: column; 
    } 


     .bodyContent { 
      //padding: 100px; 
      //overflow: hidden; 
      background-color: yellow; 
      flex: 1; 
      overflow-y: scroll; 
      height: 100%; 
     } 

      .dialogConAtentBody .bodyContent:empty { 
       display: none; 
      } 
</style> 

<div class="dialogOverlay" data-bind="visible: isOpen"> 

    <div class="dialogBase"> 

      <div class="dialogContentBody"> 

       <div class="bodyContent" data-bind="compinent: { name: bodyContentComponentName , params: bodyContentComponentParams}"> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
        <h1>Test Contnet, Test Content</h1> 
        <p>test content</p> 
       </div> 

      </div> 

    </div> 

</div>

更多更新

随着迈克尔·B的帮助下，我得到了容器固定在500像素高度，滚动，回复到最小/最大弯曲高度遗憾的是，即使滚动仍然不起作用。我已经将容器备份到HTML链，并且每个元素都有一个固定的“高度：100％”，一直到顶部。

这一个不工作

<style> 
    .dialogOverlay { 
     z-index: 600; 
     position: absolute; 
     left: 0; 
     top: 0; 
     height: 100vh; 
     width: 100vw; 
     background-color: rgba(0,0,0,0.4); 
     display: flex; 
     justify-content: center; 
     align-items: center; 
    } 

    .dialogBase { 
     position: relative; 
     min-width: 120px; 
     min-height: 120px; 
     max-width: 75%; 
     max-height: 75%; 
     overflow: hidden; 
     background-color: white; 
     border: 1px solid black; 
     margin: 10px; 
     z-index: 601; 
    } 

    .dialogContentBody { 
     z-index: 602; 
     display: flex; 
     -ms-flex-direction: column; 
     -webkit-flex-direction: column; 
     flex-direction: column; 
     height: 100%; 
    } 


    .bodyContent { 
     background-color: yellow; 
     flex: 1; 
     overflow-y: scroll; 
     height: 100%; 
    } 

    .dialogConAtentBody .bodyContent:empty { 
     display: none; 
    } 
</style> 

<div class="dialogOverlay" data-bind="visible: isOpen"> 

    <div class="dialogBase"> 

     <div class="dialogContentBody"> 

      <div class="bodyContent" data-bind="compinent: { name: bodyContentComponentName , params: bodyContentComponentParams}"> 
       . 
       . 
       . 
       lots of content 
       . 
       . 
       . 
      </div> 

     </div> 

    </div> 

</div>

这其中是否

<style> 
    .dialogOverlay { 
     z-index: 600; 
     position: absolute; 
     left: 0; 
     top: 0; 
     height: 100vh; 
     width: 100vw; 
     background-color: rgba(0,0,0,0.4); 
     display: flex; 
     justify-content: center; 
     align-items: center; 
    } 

    .dialogBase { 
     position: relative; 
     min-width: 120px; 
     max-width: 75%; 
     overflow: hidden; 
     height: 500px; 
     background-color: white; 
     border: 1px solid black; 
     margin: 10px; 
     z-index: 601; 
    } 

    .dialogContentBody { 
     z-index: 602; 
     display: flex; 
     -ms-flex-direction: column; 
     -webkit-flex-direction: column; 
     flex-direction: column; 
     height: 100%; 
    } 


    .bodyContent { 
     background-color: yellow; 
     flex: 1; 
     overflow-y: scroll; 
     height: 100%; 
    } 

    .dialogConAtentBody .bodyContent:empty { 
     display: none; 
    } 
</style> 

<div class="dialogOverlay" data-bind="visible: isOpen"> 

    <div class="dialogBase"> 

     <div class="dialogContentBody"> 

      <div class="bodyContent" data-bind="compinent: { name: bodyContentComponentName , params: bodyContentComponentParams}"> 
       . 
       . 
       . 
       lots of content 
       . 
       . 
       . 
      </div> 

     </div> 

    </div> 

</div>

按照迈克尔·B的最后的评论，绝对和相对定位也被放置在2个外容器。

最后更新

所以一对夫妇的头几个小时搔抓后，我的同事在英国，并从Michael_B和LGSon一些精彩输入一些愤怒的白板涂鸦，该解决方案被证明是相当描述性简单。

重复您的最小/最大高度一路下跌链

Michael_B是意识到这是一个继承问题，以至于出现的第一个地方的差距会回升到父其中100％在高度计算中失踪。

但是，虽然这工作，那里有一些缺少的链接。 LGSon意识到，这些链接实际上是将最小/最大规则复制到链条上，这样任何儿童都可以在链条上工作。

我想我可能标志着BOTH回复的答案乡亲，但可惜LGSon的回答是一个最终得到的东西去，很遗憾，我不能分享所有的代码，但这里是我可以分享：

外对话框

<style> 
    .dialogOverlay { 
     z-index: 600; 
     position: absolute; 
     left: 0; 
     top: 0; 
     height: 100vh; 
     width: 100vw; 
     background-color: rgba(0,0,0,0.4); 
     display: flex; 
     justify-content: center; 
     align-items: center; 
    } 

    .dialogBase { 
     position: relative; 
     min-width: 120px; 
     min-height: 120px; 
     max-width: 75vw; 
     max-height: 75vh; 
     background-color: white; 
     border: 1px solid black; 
     margin: 10px; 
     z-index: 601; 
     overflow: hidden; 
    } 

      .dialogBase .titleBar { 
       background-color: #6e6e6e; 
       color: white; 
       height: 50px; 
       width: 100%; 
       border-bottom: 1px solid black; 
       display: flex; 
       align-items: center; 
       justify-content: center; 
      } 

       .dialogBase .titleBar .titleContent { 
       padding-left: 10px; 
       font-size: 2.5rem; 
       -ms-flex: 1; 
       -webkit-flex: 1; 
       flex: 1; 
      } 

       .dialogBase .titleBar .iconContent { 
       width: 50px; /* Square icons, 50x50 */ 
       text-align: center; 
       font-size: 2.5rem; 
      } 

        .dialogBase .titleBar .iconContent.okIcon { 
        color: #449D44; 
        cursor: pointer; 
       } 

         .dialogBase .titleBar .iconContent.okIcon:hover { 
         color: #03FF03; 
        } 

        .dialogBase .titleBar .iconContent.closeIcon { 
        color: #C9302C; 
        cursor: pointer; 
       } 

         .dialogBase .titleBar .iconContent.closeIcon:hover { 
         color: #FF0600; 
        } 

    .bodyContent { 
     overflow-y: hidden; 
     min-height: 120px; 
     max-height: calc(75vh - 50px); 
    } 

</style> 

<div class="dialogOverlay" data-bind="visible: isOpen"> 

    <div class="dialogBase"> 

     <div class="titleBar"> 
      <div class="titleContent" data-bind="text: pageTitle"></div> 
      <div class="iconContent okIcon"> 
       <i class="fa fa-check-circle" data-bind="click: handleOkButton"></i> 
      </div> 
      <div class="iconContent closeIcon"> 
       <i class="fa fa-times-circle" data-bind="click: handleCloseButton"></i> 
      </div> 
     </div> 

     <div class="bodyContent" data-bind="component: { name: bodyContentComponentName , params: bodyContentComponentParams}">ANOTHER COMPONENT IS INJECTED HERE</div> 

    </div> 

</div>

内对话框标记（注入的组件[S]）

<style> 
    .dialogInnerContainer { 
     display: flex; 
     align-items: stretch; 
     -ms-align-content: stretch; 
     -webkit-align-content: stretch; 
     align-content: stretch; 
    } 

     .dialogInnerContainer .tabBar { 
      width: 60px; 
      background-color: orange; 
      border-right: 1px solid black; 
     } 

     .dialogInnerContainer .mainContentArea { 
      overflow-y: auto; 
      overflow-x: hidden; 
      min-height: 120px; 
      max-height: calc(75vh - 50px); 
     } 
</style> 

<div class="dialogInnerContainer"> 

    <div class="tabBar"> 
     Mini side bar content get's put in here 
    </div> 

    <div class="mainContentArea"> 
     Generated main contnet that needs to scroll gets put in here 
    </div> 

</div>

非常感谢全部谁有此输入。

辣妹

来源

2016-07-14 shawty

回答

3

的标题和侧栏更新以及

与合作百分之和flexbox有时可以给你不必要的问题。

此示例使用视口单位一路

这可能是一个开始吗？

Fiddle demo, without side bar

Fiddle demo, with side bar

.dialogOverlay { 
 
    z-index: 600; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background-color: rgba(0,0,0,0.4); 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.dialogBase { 
 
    position: relative; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    z-index: 601; 
 
    display: flex; 
 
    flex-direction: column 
 
} 
 
.bodyTitlebar { 
 
    background-color: gray; 
 
    color: white; 
 
    height: 50px; 
 
    border-bottom: 1px solid black; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
} 
 
.bodyWrapper { 
 
    display: flex; 
 
} 
 
.bodySidebar { 
 
    overflow: hidden; 
 
    max-height: calc(75vh - 50px);  /* compensate for title bar      */ 
 
    width: 100px; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
} 
 
.bodyContent { 
 
    overflow-y: scroll; 
 
    min-width: 20px;      /* side bar is 100 so we need the extra 20 here */ 
 
    min-height: 70px;      /* title bar is 50 so we need the extra 70 here */ 
 
    max-height: calc(75vh - 50px);  /* compensate for title bar      */ 
 
    max-width: calc(75vw - 100px);  /* compensate for side bar      */ 
 
    flex:1; 
 
    padding: 5px; 
 
    border-left: 1px solid black; 
 
}
<div class="dialogOverlay"> 
 
    <div class="dialogBase"> 
 

 
    <div class="bodyTitlebar"> 
 
     Title bar 
 
    </div> 
 

 
    <div class="bodyWrapper"> 
 
     <div class="bodySidebar"> 
 
     <h1>Side bar</h1> 
 
     <p>side bar</p> 
 
     </div> 
 

 
     <div class="bodyContent"> 
 
     <h1>Body content Body content </h1> 
 
     <p>body content</p> 
 
     <h1>Body content</h1> 
 
     <p>body content</p> 
 
     <h1>Body content</h1> 
 
     <p>body content</p> 
 
     <h1>Body content</h1> 
 
     <p>body content</p> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

来源

2016-07-14 14:24:05 LGSon

+0

不是我很害怕，我想要做的比这更复杂。不管怎么说，还是要谢谢你。 – shawty

+0

@shawty更新了我的回答 – LGSon

+0

这就是我和@michael_B目前的状况，正如我的更新中所记录的那样。 – shawty

2

对于overflow-y: scroll工作，你需要申请一个高度：

.bodyContent { 
    background-color: yellow; 
    overflow-y: scroll; 
    height: 100%;   /* NEW; based on parent's height: 500px */ 
}

https://jsfiddle.net/27vywgtm/

来源

2016-07-14 14:21:18

+0

当我用你的小提琴，然后我就可以得到它的工作，但是当我开始改变它到别的容纳任何东西，它失败。对我的第二个更新问题，这是它的代码，仍然简单地完成，但黄色区域不滚动。 – shawty

+0

在上次代码更新中，您缺少一个简单的高度声明。将'height：100％'添加到'dialogContentBody'，所以符合spec（[** demo **]（https://jsfiddle.net/27vywgtm/1/））。说明：http://stackoverflow.com/a/31728799/3597276 –

+0

啊，现在有一些新的东西。我不知道你必须一直尊重链条，直到最后一个固定的高度。但是，这仍然给我带来了一个问题。如果我将“高度：100％”添加到dialogContnetBody规则，如预期的那样工作。但是，如果我从“dialogBase”规则中取出“height：500px”，并重新启用最小/最大高度，以便该框根据内容大小进行调整，则我回到第一个方框。 – shawty

相关问题

 相关问题