增加 div 高度以适应 ajax 手风琴答案

【问题标题】：Increase div height to fit ajax accordion增加 div 高度以适应 ajax 手风琴
【发布时间】：2013-06-04 04:45:24
【问题描述】：

我在网页上有以下布局

    <asp:panel id="overview_pnl">
      <asp:panel id="top_row" CssClass="overviewRows">
        <ajaxToolKit:Accordion>
           <Panes>
              <AccordionPane id="pane1">

                  <header> ... </header>
                  <content> <div id="detail" class="details"> </div> </content>          

              </AccordionPane>
          </Panes>
        </ajaxToolKit:Accordion>
      </asp:panel >
      <asp:panel id="middle_row">
         ... same as top row ...
      </asp:panel >

      <asp:panel id="bottom_row">

      </asp:panel >

  </asp:panel >

CSS

.overviewRows { width:508px; vertical-align:top; display:inline-block; float:left;  }
.details {
    margin: 0 2px;
    padding: 10px 5px;
    width: 154px;
    border: 1px #CCC solid;
    border-top: none;
    display: block;
    font-size: 12px;
    text-align: left;
}

我希望 id 为“top_row”的 div 将其高度扩展为适合整个窗格，并向下推中间和底部 div，以免内容溢出。

我已经在 css 中尝试了 overflow，但它并没有按照我想要的方式工作。它在手风琴展开之前为高度带来了滚动条，我不得不滚动查看数据。我只是想让它把所有东西都压下来，我不知道该怎么做。

【问题讨论】：

向我们展示它的 CSS 吗？
你能添加一个简化的jsfiddle吗？
将 top_row 的高度设置为 100%？
100% 高度不起作用@IrishChieftain，我试过了。

标签： asp.net css ajax

【解决方案1】：

您知道您希望手风琴达到的预期高度吗？您可以添加一个 min-height 属性来确保它满足该要求吗？

【讨论】：

我知道它必须达到的高度，但如果我把它设为最小高度，它就违背了问题的目的。
不完全是，但如果您可以在 jsfiddle 上发布一些内容供人们使用，将会对您有所帮助，谢谢。