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

Question

我的网页布局如下

    <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，但它没有按我想要的方式工作。在展开手风琴之前，它会显示高度的滚动条，我必须滚动才能看到数据。我只想让它把所有东西都往下推，但我不知道该怎么做。

Answer 1

你知道手风琴的预期高度吗?你能添加一个最小高度属性来确保它满足这个要求吗?