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。物品区域不应该更进一步，以便父母div不必变得更大。

这一切都说，我希望items-region div正确溢出。我不希望它的父母变大和溢出，因为我最终滚动搜索栏看不见。

Answer 1

给父级一个高度，并且还给孩子一个等于小于父高度（和任何子填充）的max-height。

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

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

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

只有父母才能生成div

1 个答案: