I have a fixed length div called Content div that contains two other divs - div1 and div2. Both of these divs are larger in size compared to Content div, allowing the user to scroll within the container. The user will initially read the content in div1 and then click on a button within div1 to reveal div2 while hiding div1. However, every time div2 is revealed, it only shows the bottom part of the content. How can I ensure that when div1 is hidden and div2 is shown, the top of div2 is visible inside Content div?
Any assistance on this matter would be greatly appreciated.
HTML CODE-
<div class = "completeBody">
<div class = "header">
</div>
<div class = "content">
<div class = "content1" *ngIf="showContent1">
<div>
top
</div>
<div class="bottomPoint">
bottom
<button (click)="showContent2()">SHOW Content2</button>
</div>
</div>
<div class = "content2" *ngIf="!showContent1">
<div>
top
</div>
<div class="bottomPoint">
SEE NOW YOU ARE IN BOTTOM,I WANT THAT WHEN CONTENT2 SHOULD BECOME VISIBLE,ITS TOP SHOULD COME FIRST
</div>
</div>
</div>
<div class = "footer">
</div>
</div>
CSS CODE-
/* Styles go here */
.completeBody
{
height: 100%;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
}
.header
{
height: 10%;
width: 100%;
background-color: red;
}
.content
{
height: 80%;
margin: 20px;
background-color: #efefef;
border: 2px solid black;
overflow: auto;
}
.footer
{
height: 10%;
width: 100%;
background-color: green;
}
.content1
{
height:1000px;
background-color: blue ;
}
.content2
{
height:1000px;
background-color: #909090 ;
}
.bottomPoint
{
padding-top:950px;
}
TYPESCRIPT CODE-
import {Component} from '@angular/core';
@Component({
selector: 'app',
templateUrl: 'app/apphtml.html',
styleUrls: ['app/appcss.css'],
})
export class App {
showContent1:boolean;
constructor() {
this.showContent1 = true;
}
showContent2()
{
this.showContent1 = false;
}
}
HERE IS THE LINK FOR PLUNKER - https://plnkr.co/edit/abjZKMt0CkvJaTgaBDRm?p=preview