如何使滚动条不大于页面大小的 100% 的 div答案

【问题标题】：How to make a div with scrollbar no bigger than 100% of the page size如何使滚动条不大于页面大小的 100% 的 div
【发布时间】：2015-08-02 23:38:47
【问题描述】：

<!-- **********************************************************************************************************************************************************
      RIGHT SIDEBAR CONTENT
      *********************************************************************************************************************************************************** -->                  
      



        <h3>REMEMBER</h3>
        <!-- Open Scrollable Container -->
        <div style="overflow:scroll; height:200px;">                   
          <!-- Action -->
          <div class="desc">
            <div class="thumb">
              <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
            </div>
            <div class="details">
              <p><muted>In 5 hours</muted><br/>
               <a href="/disp_events">The First Event</a> starts.<br/>
             </p>
           </div>
         </div>
         

         <!-- Action -->
         <div class="desc">
          <div class="thumb">
            <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
          </div>
          <div class="details">
            <p><muted>Tomorrow</muted><br/>
             <a href="/disp_events"> Basketball </a> will be played<br/>
           </p>
         </div>
       </div>
     </div> <!-- Close scrollable div -->



     <h3>FEATURED EVENTS</h3>
     <!-- Open Scrollable Container -->
     <!-- TODO: Make the height of the whole thing 100% -->
     <div style="overflow:scroll; height:150px;">                   
      <!-- First Action -->
      <div class="desc">
       <div class="thumb">
        <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
      </div>
      <div class="details">
        <p><muted>In a week at <a href="/disp_events">New York</a></muted><br/>
         <a href="/disp_events">Tennis Match B) </a> will start.<br/>
       </p>
     </div>
   </div>
   <!-- Second Action -->
   <div class="desc">
    <div class="thumb">
      <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
    </div>
    <div class="details">
      <p><muted>In a week at <a href="/disp_events">New York</a></muted><br/>
       <a href="/disp_events">Sportsball</a> will start.<br/>
     </p>
   </div>
 </div>
 <!-- Third Action -->
 <div class="desc">
  <div class="thumb">
    <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
  </div>
  <div class="details">
    <p><muted>In a week at <a href="/disp_events">New York</a></muted><br/>
     <a href="/disp_events">Fútbol yo </a> will start.<br/>
   </p>
 </div>
</div>
<!-- Fourth Action -->
<div class="desc">
  <div class="thumb">
    <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
  </div>
  <div class="details">
    <p><muted>16 years ago at <a href="/disp_events">France</a></muted><br/>
     <a href="/disp_events">A passed event </a> happened.<br/>
   </p>
 </div>
</div>
<!-- Fifth Action -->
<div class="desc">
  <div class="thumb">
    <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
  </div>
  <div class="details">
    <p><muted>In a week at <a href="#">New York</a></muted><br/>
     <a href="#">Bigest Party every</a> will start.<br/>
   </p>
 </div>
</div>

</div> <!-- Close scrollable div -->

</div><!-- /col-lg-3 -->

我正在寻找一种方法来使我的 div 的滚动条不大于页面大小的 100%。但是，将 div 的高度设置为 100% 不起作用。

这是我设置所有 div 的 html：

     <h3>REMEMBER</h3>
        <!-- Open Scrollable Container -->
        <div style="overflow:scroll; height:200px;">                   
          <!-- Action -->
          <div class="desc">
            <div class="thumb">
              <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
            </div>
            <div class="details">
              <p><muted>In 5 hours</muted><br/>
               <a href="/disp_events">The First Event</a> starts.<br/>
             </p>
           </div>
         </div>


         <!-- Action -->
         <div class="desc">
          <div class="thumb">
            <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
          </div>
          <div class="details">
            <p><muted>Tomorrow</muted><br/>
             <a href="/disp_events"> Basketball </a> will be played<br/>
           </p>
         </div>
       </div>
     </div> <!-- Close scrollable div -->



     <h3>FEATURED EVENTS</h3>
     <!-- Open Scrollable Container -->
     <!-- TODO: Make the height of the whole thing 100% -->
     <div style="overflow:scroll; height:150px;">                   
      <!-- First Action -->
      <div class="desc">
       <div class="thumb">
        <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
      </div>
      <div class="details">
        <p><muted>In a week at <a href="/disp_events">New York</a></muted><br/>
         <a href="/disp_events">Tennis Match B) </a> will start.<br/>
       </p>
     </div>
   </div>
   <!-- Second Action -->
   <div class="desc">
    <div class="thumb">
      <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
    </div>
    <div class="details">
      <p><muted>In a week at <a href="/disp_events">New York</a></muted><br/>
       <a href="/disp_events">Sportsball</a> will start.<br/>
     </p>
   </div>
 </div>
 <!-- Third Action -->
 <div class="desc">
  <div class="thumb">
    <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
  </div>
  <div class="details">
    <p><muted>In a week at <a href="/disp_events">New York</a></muted><br/>
     <a href="/disp_events">Fútbol yo </a> will start.<br/>
   </p>
 </div>
</div>
<!-- Fourth Action -->
<div class="desc">
  <div class="thumb">
    <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
  </div>
  <div class="details">
    <p><muted>16 years ago at <a href="/disp_events">France</a></muted><br/>
     <a href="/disp_events">A passed event </a> happened.<br/>
   </p>
 </div>
</div>
<!-- Fifth Action -->
<div class="desc">
  <div class="thumb">
    <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
  </div>
  <div class="details">
    <p><muted>In a week at <a href="#">New York</a></muted><br/>
     <a href="#">Bigest Party every</a> will start.<br/>
   </p>
 </div>
</div>

</div> <!-- Close scrollable div -->

</div><!-- /col-lg-3 -->

当我使用高度设置为 200 像素时它可以工作，但是当我使用高度为 100% 时，它没有设置为 100%，它使用了它需要的所有空间以使其成为没有滚动条。

我该如何解决这个问题？

【问题讨论】：

那么第一个块的高度是 200 像素，而第二个块是屏幕的其余部分？
没错。我该怎么做？
请为您的代码创建一个演示。

标签： html css scrollbar

【解决方案1】：

您的 body 标签需要一个高度，通过将其设置为 100vh 您可以获得屏幕高度。

<body style="height: 100vh;">
  <div style="height: 200px">
    I am always 200px large
  </div>
  <div style="height: calc(100% - 200px)">
    I am always the difference of the screen size and 200px
  </div>
</body>

http://jsfiddle.net/trdh9kxr/

【讨论】：