如何使 div 的滚动条不超过页面大小的 100%

Question

<!-- **********************************************************************************************************************************************************
      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 -->

当我将高度设置为 200px 时它起作用了，但是当我将高度设置为 100% 时它没有设置为 100% 它使用了它需要的所有 space 才能不滚动酒吧.

我该如何解决这个问题？

Answer 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/

如何使 div 的滚动条不超过页面大小的 100%

How to make a div with scrollbar no bigger than 100% of the page size

html

css

scrollbar