javascript - 使 div 仅与父级一样长

Question

我有一个用户可以搜索的区域:

    <div id="questions-container">
<div>
   <div id="searchbar-region">
      <div>
         <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            </span>
            <input id="search" class="form-control" placeholder="Rechercher" value="" type="text">
         </div>
      </div>
   </div>
   <div id="categories-region">
      <div>
         <div class="dropdown">
            <button class="default-dropdown dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
               <span id="category" class="pull-left">Toutes catégories</span>
               <div class="pull-right"><span class="caret"></span></div>
            </button>
            <ul id="categories" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
               <li><a href="#" class="category" role="menuitem" tabindex="-1">
                  Toutes catégories
                  </a>
               </li>
            </ul>
         </div>
      </div>
   </div>
   <div id="items-region" class="left-panel-items">
      <div>
         <div class="btn-group-vertical" role="group">
            <div class="btn btn-default">
               <div class="text-left">
                  À quand remonte votre dernier examen medical?
               </div>
            </div>
            <div class="btn btn-default">
               <div class="text-left">
                  Avez vous des démangeaisons?
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

我的想法是，我有一个 div，里面是:

A search bar.
A category dropdown.
a list of questions.

通常这个包含这些东西的 div 的高度与窗口高度成正比，因为它到达了页面底部。

所以如果我只有几个问题，div 的高度不会改变。

如果我有很多问题，我很容易发现 div 的高度为 4,000px。

这会导致 div 本身而不是 items-region 溢出。 items-region 不应再进一步，这样父 div 永远不必变大。

综上所述，我希望 items-region div 正确溢出。我不希望它的父级变大并溢出，因为那样我最终会滚动搜索栏而看不见。

Answer 1

给父级一个高度，同时给子级一个最大高度，等于小于父级高度(和任何子级填充)。

<div style="height: 400px;">
  <div style="max-height: 390px; overflow-y:auto;">
    <div style="height: 5000px; background:red">Simulated long block</div>
  </div>
</div>

现在，子 block 和父 block 都只占用 400px，如果其中的内容超过 390px，则可以滚动。

像这样:http://codepen.io/ovdojoey/pen/WvqQNm