在表格旁边放置一个 div 并添加滚动条

Question

我有一张桌子，在这张桌子旁边我需要放置一个 div，如下图所示。 我尝试使表格向左浮动并给出宽度：75% 和 sidediv 向右浮动和宽度：25%。 它有效，但没有响应。 我需要它来响应。 所以我尝试使用引导网格系统，但我没有成功，我还需要将滚动条添加到表格和侧边 div。

stackblitz 链接

 .test{ overflow-y: auto !important; height: 100% !important; }

 <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light"> <div class="ml-auto"> <input class="form-control" name="search" [(ngModel)]="search" type="search" placeholder="Search" /> </div> </nav> <br /><br /> <section> <div class="w-75 float-left overflow-auto test"> <table class="table table-hover"> <tr> <th>Date</th> <th>List Name</th> <th>No. of Entities</th> </tr> <tbody> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> </tbody> </table> </div> </section> <br /> <aside> <div class="w-20 float-right overflow-auto test"> <div class="alert alert-dark">+Add Description</div> <p>{{s}}</p> </div> </aside>

Answer 1

这是我的解决方案，我使用引导程序使其响应。

我用.container-fluid类包裹了你的部分，然后用.row和.row col-*类包裹了内部组件。 以全视图打开示例。

为了使其 100% 高度，我使用了height: calc(100vh - 54px);

100vh 意味着它需要您的视口的高度。

减去 54px 是为了避免滚动整个页面

 .test { overflow-y: auto !important; height: calc(100vh - 54px); /*54px is height of navbar*/ }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light"> <div class="ml-auto"> <input class="form-control" name="search" [(ngModel)]="search" type="search" placeholder="Search" /> </div> </nav> <br/><br/> <div class="container-fluid"> <section class="row"> <div class="col-md-8 col-12 overflow-auto test"> <table class="table table-hover"> <tr> <th>Date</th> <th>List Name</th> <th>No. of Entities</th> </tr> <tbody> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> </tbody> </table> </div> <div class="col-md-4 col-12 overflow-auto test"> <div class="alert alert-dark">+Add Description</div> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> </div> </section> </div>

Answer 2

如果您使用的是引导程序，那就再简单不过了。 它旨在使响应式布局变得简单。

如果您想将一个 div 在较大的屏幕上并排放置在另一个屏幕的顶部，请在 .container > .row 结构中使用 col-{size}-{n} CSS 类，其中 size 是 xs, sm 之一, md, lg, xl 和 1 >= n <= 12。

这是您使用 col-md-8 和 col-md-4 的示例。 使用 -md- 断点意味着在屏幕尺寸 >= 768px 中，div 将彼此并排，并堆叠在彼此的顶部 < 768px。

https://jsfiddle.net/d5nxwbLj/1/

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <!-- your table here -->
    </div>
    <div>
      <!-- your aside here -->
    </div>
  </div>
</div>

Bootstrap 可以更好地解释所有可能性： https : //getbootstrap.com/docs/4.3/layout/grid/

Answer 3

而不是使用 w-75 使用Bootstrap Grid System将所有代码包装到.container > .row > .col-*-*希望它会帮助你

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <section> <div class="container"> <div class="row"> <div class="col-md-8"> <table class="table table-hover"> <tr> <th>Date</th> <th>List Name</th> <th>No. of Entities</th> </tr> <tbody> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> </tbody> </table> </div> <div class="col-md-4"> <div class="alert alert-dark">+Add Description</div> <p>{{s}}</p> </div> </div> </div> </section> </body> </html>