Question

＆＃13;

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

＆＃13;

我正在寻找一种方法来使我的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％它使用了它所需的所有空间而不是滚动条。

我该如何解决这个问题？

Answer 1

您的身体标签需要一个高度，通过将其设置为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/

如何使用滚动条创建一个不大于页面大小100％的div

1 个答案: