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文件中：

scrollable { overflow-y：scroll; }

在你的html中，在你想要滚动的每个div中添加类 scrollable 。

overflow-y 代码指定当div或任何元素的y轴（高度）超过其当前高度时您想要做什么。 scroll 指定在这种情况下它需要是可滚动的。

将滚动条放到div中并将获取的数据放入其中

2 个答案: