滚动父div内的子div [英] Scrolling child div within a parent div

问题描述

一些背景

我使用 Gridster 网页小部件。这些小部件显示在HTML表格下方。该表有助于识别每个小部件的一些信息。小部件为html < li> 元素放置在< ul> 中。

json。（所以他们不是固定的数量）

我的期望输出

由于这些小部件是动态生成的，因此可能会有太多的小部件。当发生这种情况时，网页变得太大，用户无法看到HTML表。

所以我想要的是那里的小部件应该滚动，HTML表格被固定在它的位置上。

由于即使用户想要查看底部的小部件，可以看到它的HTML表格

我有tr ied到目前为止

我为小部件在那里的部分做了一个< div> 并给他们提供了 overflow：scroll 这些属性。但即使如此，它并没有以我期望的方式工作

My HTML

 < div class =content-wrapper> 
< div class =row> 
< div class =col-md-12 grid-margin stretch-card> 
< div class =card> 
< div class =card-body> 
< h4 class =card-title>我的网页< / h4> 
< p class =card-descriptionstyle =color：black;> 
汽油区域：A，年份：2018 
 
 
< div class =row> 
< div class =col-md-12> 
< div class =btn-group btn-block mb-4aria-label =steps> 
< div class =col md-4> 
< a href =/ app / step-1 /> < button type =buttonclass =btn btn-block btn-outline-secondary>第1步< / button> < / A> 
< / div> 
< div class =col md-4> 
< a href =/ app / step-2 /> < button type =buttonclass =btn btn-block btn-outline-secondary>第2步< /按钮> < / A> 
< / div> 
< div class =col md-4> 
< a href =/ app / step-3 /> < button type =buttonclass =btn btn-block btn-primary>第3步< /按钮>< / a> 
< / div> 
< / div> 
< / div> 
< / div> 
 
 
< table border =1class =。table-responsive> 
< tr> 
< th colspan =4style =background-color：＃eedd82;> Zone 1< / th> 
< th colspan =4style =background-color：＃eedd82;> Zone 2< / th> 
< th colspan =4style =background-color：＃eedd82;>> Zone 3< / th> 
< / tr> 
< tr> 
< td width =400align =centerstyle =background-color：＃0085ca> T1< / td> 
< td width =400align =centerstyle =background-color：＃0085ca> T2< / td> 
< td width =400align =centerstyle =background-color：＃0085ca> T3< / td> 
< td width =400align =centerstyle =background-color：＃0085ca> T4< / td> 
< td width =400align =centerstyle =background-color：＃0085ca> T1< / td> 
< td width =400align =centerstyle =background-color：＃0085ca> T2< / td> 
< td width =400align =centerstyle =background-color：＃0085ca> T3< / td> 
< td width =400align =centerstyle =background-color：＃0085ca> T4< / td> 
< td width =400align =centerstyle =background-color：＃0085ca> T1< / td> 
< td width =400align =centerstyle =background-color：＃0085ca> T2< / td> 
< td width =400align =centerstyle =background-color：＃0085ca> T3< / td> 
< td width =400align =centerstyle =background-color：＃0085ca> T4< / td> 
< / tr> 
< / table> 
 
 <！ -  Gridster小工具将显示在下方的表格中 - > 
< div class =gridster father> 
< ul class =child> 
 
< / ul> 
< / div> 
  

对于如此大的HTML代码，我感到抱歉。在HTML中，您可以看到< table> 我给了< div> 类的一个类 father 和小孩到< ul> 元素。

对于他们两人，我尝试了下面的CSS（单独和合并）

  .father {
 overflow：scroll ; 
} 
 
 .child {
 overflow：scroll; 
} 
  

但我没有给出我想要的滚动效果

小提琴代表相同的$ / b>

任何帮助都将得到真正的赞赏

解决方案

假设您希望应用滚动来启用响应行为较小的显示器，如手机，溢出滚动应该应用于表的父母，以便像这样滚动。

 < div class =parent> 
< ul class =child> 
 ... 
< / ul> 
< / div> 
  

CSS：

  .parent {
 overflow：scroll; 
 
 $ / code> 

为了获得更好的响应体验，我们可能只希望将这个滚动从左到右（y轴），而不是从上到下（x轴），我们也需要设置它，所以需要相应地调整我们的CSS。

  .parent {
 overflow-y：scroll; 
 
 
 
 $ b $ p 
 $ b 
在你的例子中，父类和子类正在被应用到grid构建为一个无序列表（< ul> ），其中带有小汽车图标。< ul> 正在定义父级的高度，因此，在一个足够大的窗口中，表格不会被滚动。如果压缩窗口，但父元素只扩展到窗口的宽度，这是div的预期行为。此时子元素会滚动。
 
 
 
如果您希望将相同的行为应用于 .table-response 元素你需要应用相同的原则。将表格包装在父级中并相应地应用溢出。您不希望在表格本身上放置 overflow-scroll ，但您可能希望为该表格指定最小宽度或应用固定宽度，例如 width：300px;  
 
 
 
  HTML：  
 
 < div class =parent> 
< table class =table-responsive> 
 ... 
< / table> 
< / div> 
  
  CSS：  
 
 
  .parent {
 overflow-y：scroll; 
 
 .table-responsive {
 your styles 
} 
  
如果您需要修改父级的维度，以便元素不定义窗口的大小，那么您可以在CSS中执行类似操作。
  .parent {
 overflow：scroll; 
 width：400px; 
最大宽度：100vw; 
 height：400px; 
最大高度：100vh; 
 
 .table-responsive {
 your styles 
} 
  
在这种情况下，您的宽度理想情况下是400px宽，但绝不会超过视口宽度，并且绝不会超过400px高，但不会超过视口高度。 
如果你想让你的身高更聪明，你可以使用 calc 为你的最大高度，所以该窗口永远不会超过特定的高度，同时考虑到页面上的其他元素。
 
Some background

I am using Gridster widgets for webpage.These widgets are displayed below an HTML table.The table helps in identifying some information for each widget.The widgets are html <li> elements placed in <ul>.

The widgets are generated dynamically from a json.(So they are not fixed in number)

My desired output

Since the widgets are dynamically generated there can be too many widgets.When this happens the webpage becomes too big and user cant see the HTML table.

So what I want is that the part in which widgets are there should scroll, the HTML table being fixed at its position

Due to which even when user wants to see the widgets which are at bottom he can see the HTML table with it

What I have tried so far

I made a <div> to the part in which widgets are there and gave the property overflow:scroll to them.But even then its not working in the way I am expecting

My HTML 
<div class="content-wrapper">
    <div class="row">
      <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">My Webpage</h4>
           <p class="card-description" style="color:black;">
                      Zone for Gasoline:A, Year :2018
            </p>
            <div class="row">
             <div class="col-md-12">
              <div class="btn-group btn-block mb-4" aria-label="steps">
                     <div class="col md-4">
                        <a href="/app/step-1/"> <button type="button" class="btn btn-block btn-outline-secondary"> Step 1 </button> </a>
                         </div>
                <div class="col md-4">
                        <a href="/app/step-2/"> <button type="button"  class="btn btn-block btn-outline-secondary" > Step 2  </button> </a>
                      </div>
                 <div class="col md-4">
                        <a href="/app/step-3/"> <button type="button" class="btn btn-block btn-primary"> Step 3 </button></a>
                </div>
               </div>
              </div>
            </div>


  <table border = "1" class=".table-responsive">
     <tr>
        <th colspan="4"  style="background-color:#eedd82;">Zone 1</th>
        <th colspan="4"  style="background-color:#eedd82;">Zone 2</th>
        <th colspan="4"  style="background-color:#eedd82;">>Zone 3</th>
     </tr>
     <tr>
        <td width="400" align="center" style="background-color:#0085ca">T1</td>
        <td width="400" align="center" style="background-color:#0085ca">T2</td>
        <td width="400" align="center" style="background-color:#0085ca">T3</td>
        <td width="400" align="center" style="background-color:#0085ca">T4</td>
        <td width="400" align="center" style="background-color:#0085ca">T1</td>
        <td width="400" align="center" style="background-color:#0085ca">T2</td>
        <td width="400" align="center" style="background-color:#0085ca">T3</td>
        <td width="400" align="center" style="background-color:#0085ca">T4</td>
        <td width="400" align="center" style="background-color:#0085ca">T1</td>
        <td width="400" align="center" style="background-color:#0085ca">T2</td>
        <td width="400" align="center" style="background-color:#0085ca">T3</td>
        <td width="400" align="center" style="background-color:#0085ca">T4</td>
     </tr>
 </table>

 <!--Gridster widgets will appear here below table-->
 <div class="gridster father">
      <ul class="child">

      </ul>
</div>
I am sorry for so big HTML code.In HTML you can see that below <table> I have given a class father to the <div> and child to <ul> element.

For both of them I tried the following CSS(individually and in combined way)
.father{
    overflow:scroll;
  }

.child{
    overflow:scroll;
  }
But I was not giving the "scrolling" effect which I wanted

Fiddle representing the same

Any help will be really appreciated 
解决方案
Assuming you wish to apply scrolling to enable responsive behaviour on smaller displays such a s mobile phone, overflow scroll should be applied to a parent of the table to enable scrolling like so 

HTML:
<div class="parent">
    <ul class="child">
        ...
    </ul>
</div>
CSS: 
.parent {
    overflow: scroll;
}
For a better responsive experience we probably only want this scrolling to be left to right (y-axis) and not top to bottom (x-axis) we need to set this as well and so therefore need to adjust our CSS accordingly.
.parent {
    overflow-y: scroll;
}
In your example it looks like the father and child classes are being applied to the grid build as an unordered list (<ul>) with the little car icons in. This <ul> is defining the height and with of the the parent, so therefore in a large enough window the table would not be expected to scroll. If you compress the window however the parent element only expands to the width of the window which is expected behaviour of a div. At this point the child element does scroll.

If you wish to apply this same behaviour to the .table-responsive element you need to apply the same principle. Wrap the table in a parent and apply the overflow accordingly. You do not want to put overflow-scroll on the table itself, but you may wish to give the table a min-width or apply a fixed width such as width: 300px;

HTML:
<div class="parent">
    <table class="table-responsive">
        ...
    </table>
</div>
CSS: 
.parent {
    overflow-y: scroll;
}
.table-responsive {
    your styles
}
If you need to fix the dimensions of the parent so that the element does not define the size of the window you could do something like so with your CSS
.parent {
    overflow: scroll;
    width: 400px;
    max-width: 100vw;
    height: 400px;
    max-height: 100vh;
}
.table-responsive {
    your styles
}
In this case your width will ideally be 400px wide, but never exceed the viewport width and never be more that 400px high, but never exceed the viewport height.
If you want to get even cleverer with your height you could use calc for you max height so the that window never exceeds a specific height taking into consideration other elements on the page.

                        
这篇关于滚动父div内的子div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！