Question

我正在使用Angular 4.3中由Jhipster生成的应用程序。

我在父组件中包含了几个组件，而且显示器存在问题。实际上它看起来像这样：

代码在父组件中如下所示：

<h1> My title </h1>
<div class="row">
    <div class="col-md-8">
        <jhi-child-comp1></jhi-child-comp1>
    </div>
    <div class="col-md-4">
        <jhi-child-comp2></jhi-child-comp2>
        <jhi-child-comp3></jhi-child-comp3>
    </div>
</div>

child-comp1包含一个对我的屏幕来说太大的表，表的类是：

<div class="table-responsive" *ngIf="users">
        <table class="table table-hover">
            ...
        </table>
</div>

如果孩子太大，我不知道如何在父组件上添加滚动条。

我已经搜索了解决方案，但我只找到了这样的解决方案：Limit the child component size from the parent

但是如果子组件占用太多空间，我希望父组件上有一个滚动条。

有没有人有想法？

Answer 1

    <!DOCTYPE html>
    <html>
    <head>
    <style> 

   div.ex1 {
    background-color: lightblue;
    height: 30px;
    overflow-y: scroll;
}
   </style>
    </head>
    <body>
    <h1>The overflow-x Property</h1>
    <h2>overflow-x: scroll:</h2>
    <div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
    The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges
    </div>
    </body>
    </html>

Angular组件和CSS：子组件对于其父组件来说太大了

1 个答案: