將滾動條放置到div並將獲取的數據放入其中

Question

您好，我想在我的div中放置一個滾動條，並將所有獲取數據放入其中。 有人可以幫助我，給我一些想法嗎？ 我剛剛開始學習php和html。

這是我想做的例子。 一模一樣。

這是我的工作。 我想在3個div，事件，新聞和公告中放置滾動條。

這是新聞，事件和公告的代碼。

   <div class="content">
     <div class="container">
      <div class="row">

      <div class="col-xs-12 col-md-9">
     <div class="fix leftbar floatleft">
        <div class="fix left_sidebar">
           <div class="news">
              <h2><i class="fa fa-newspaper-o"></i> Latest News</h2>
              <hr class="carved">


                     <?php
                     include_once('connection.php');
                     $sql ="SELECT * FROM news ORDER BY news_id ASC limit 4";
                     $result = mysqli_query($con, $sql);

                     while($row = mysqli_fetch_array($result)){
                     $title = $row['news_title'];
                     $date = $row['news_date'];
                     $content = $row['news_content'];
                     $newsimage = $row['news_image'];
                     ?>
                     <div class="fix single_news">
                       <div class="single_image">
                           <img src="<?php echo $newsimage; ?>" alt="court">
                       </div>
                       <a href="#"><?php echo $title; ?></a>
                       <p><?php echo $date; ?></p>
                     <p><?php echo $content; ?></p>
                     </div>
                      <hr>
                    <?php
                     }
                     ?>   


                <a href="#" class="view_news">View More News</a>

            </div>
        </div>
    </div>
    </div>

   <div class="col-xs-6 col-md-3">
   <div class="fix sidebar floatright">
        <div class="fix single_sidebar">
            <div class="events">
                <h2><i class="fa fa-calendar"></i> Upcoming events</h2>
                           <hr class="carved">
                            <div class="fix single_events">
                                <div class="date">
                                     <span class="month">August</span>
                                      <h1 class="day">28</h1>
                                 </div>
                                <h2>Independence Day</h2>
                                <p>7:00 AM - 8:00 PM</p>
                            </div>
                            <hr>
                            <div class="fix single_events">
                                <div class="date">
                                 <span class="month">August</span>
                                 <h1 class="day">28</h1>
                                 </div>
                                <h2>New Year</h2>
                                <p>7:00 AM - 8:00 PM</p>
                            </div>
                            <hr>
                            <div class="fix single_events">
                                 <div class="date">
                                 <span class="month">August</span>
                                 <h1 class="day">28</h1>
                                 </div>
                                <h2>Thesis Defense</h2>
                                <p>7:00 AM - 8:00 PM</p>
                            </div>
                                      <hr>
                            <a href="#" class="view_calendar">View Academic Calendar</a>
            </div>
        </div>
   </div>
   </div>

   <div class="col-xs-6 col-md-3">
        <div class="fix bottombar floatright">
        <div class="fix bottom_bar">
            <div class="announcements">
                        <h2><i class="fa fa-bullhorn"></i> Announcements</h2>
                           <hr class="carved">
                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                                      <hr>
                            <a href ="#" class="view_announcements">View more announcements</a>

            </div>
        </div>
        </div>
   </div>


    </div>

  </div>
 </div>

Answer 1

如果要div滾動，請設置高度和溢出來滾動

.scrollDiv{
    display:block;
    max-height:150px; /*Put your maximum height here*/
    overflow-y:scroll; /*Tell it to scroll if the content is larger than max-height*/
}

Answer 2

將以下內容添加到您的css文件中：

可滾動{overflow-y：滾動; }

在您的html中，要使每個div都可滾動，請添加class scrollable 。

y溢出代碼指定div或任何元素的y軸（高度）超過其當前高度時要執行的操作。 滾動條指定在這種情況下需要滾動。