div 设置为高度 100%，使用 scroll-y: hidden，但是我如何让子 div 具有可滚动性？

Question

Since this is purely HTML/CSS issue I did not tag angular as I reproduced it purely in HTML as a fiddle.

I have a div with a height:100% and overflow-y: hidden so the div maintains the viewport.

The issue though I noticed is that a div in there is populated by ngFor and scales off the page but it won't let me set overflow-y: scroll thinking it works. It didn't though, so I'm a bit confused.

.banner { height: 100px; }
.content { height: calc(100% - 150px); }
.footer { height: 50px; }

<div class="banner"></div>
<div class="content">
  <router-outlet></router-outlet>
</div>
<div class="footer"></div>

And then in the child component:

.content { overflow-y: hidden; }
.table { overflow-y: scroll; }

<div class="content">
  <div class="title">{{title}}</div>
  <div class="table" *ngFor="let row of rows">
    <ng-container [ngTemplateOutlet]="headers"></ng-container>
  </div>
</div>

I can't seem to get this working though. Here is a sample fiddle: https://jsfiddle.net/uctxnads/

Edit: Please ensure you are using the current fiddle.

I am trying to get the content of the div.table to scroll, not .contentB . As I wanted to have the {{title}} to remain static if at all possible.

Answer 1

Your contentB class needs to have

    overflow-y: scroll;

This worked for me using your fiddle.

Edit:

For the scroll to work only within your table, you can create a parent div right before it with a class that adds a max-height and automatic scroll, like this:

    <div class="scrollable">
        <div class="table">
        <!-- contents of your table -->
        </div>
    </div>

And your scrollable class should have

        .scrollable {
           max-height: 50px; // You can set this as you wish
           overflow-y:auto;
        }

Working fiddle with this example: https://jsfiddle.net/jgztwmsk/

Answer 2

Change the CSS for .contentB to allow it to scroll:

.contentB {
  overflow-y: auto;
  height: 100%;
}

https://jsfiddle.net/fnrm4aLg/

And if you need the .title NOT to scroll, just move it up into the previous container, out of the current one: https://jsfiddle.net/p6xr39yv/

Answer 3

The problem is that you are using the calc function, use a direct value.

You can use overflow-y: auto; on .contentA .

And on .contentB there's no need to change the overflow.

https://jsfiddle.net/ratyxpj7/

 .wrapper { height: 500px; width: 100%; position: absolute; }.banner { height: 100px; background-color: grey; }.contentA { height: 350px; overflow-y: scroll; }.footer { height: 50px; background-color: grey; } /* This is the content of the inner component. */.contentB { height: 100%; }.table { display: table; overflow-y: scroll; }.table > div { display: table-row; }.table div div { display: table-cell; }

 <div class="wrapper"> <div class="banner"></div> <div class="contentA"> <div class="contentB"> <div class="title"> Title </div> <div class="table"> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> <div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> <div>CellA</div> </div> </div> </div> </div> <div class="footer"></div> </div>