I would like my ion-content adjusted to the size of the screen. In this case, fill in and do not leave that void at the bottom.
Example with a large resolution:
![u73u0]()
Hence if the height of the screen is smaller, it causes to do scroll, getting that part white, because the bottom does not fill when it does screen scroll
<ion-content >
<ion-grid class="teste">
<ion-item class="a">
<ion-label class="flNome" position="floating">NOME</ion-label>
<ion-input name="title" [(ngModel)]="title" class="nome" type="text" ></ion-input>
</ion-item>
<ion-item class="c">
<ion-label class="flNome" position="floating">LOCAL DO EVENTO</ion-label>
<ion-input size="30px" name="evento" [(ngModel)]="evento" class="evento" type="text" ></ion-input>
</ion-item>
<ion-item class="d">
<ion-label class="flNome" position="floating">QUAL A SUA FESTA?</ion-label>
<ion-select name="select" [(ngModel)]="select" okText="Okay" cancelText="Dismiss">
<ion-select-option value="casamento">CASAMENTO</ion-select-option>
<ion-select-option value="fifiteenAnos">15 ANOS</ion-select-option>
<ion-select-option value="formatura">FORMATURA</ion-select-option>
<ion-select-option value="empresarial">EMPRESARIAL</ion-select-option>
</ion-select>
</ion-item>
<ion-item class="e">
<ion-label class="flNome" position="floating">CONVIDADOS</ion-label>
<ion-input name="conv" [(ngModel)]="conv" class="convidados" type="text" ></ion-input>
</ion-item>
<ion-item class="f">
<ion-label class="flNome" >DATA</ion-label>
<ion-input name="date" [(ngModel)]="date" class="data" type="date" ></ion-input>
</ion-item>
<ion-item class="g">
<ion-label class="flNome" position="floating">TELEFONE</ion-label>
<ion-input name="tel" [(ngModel)]="tel" class="telefone" type="tel" ></ion-input>
</ion-item>
<ion-item class="h">
<ion-label class="flNome" position="floating">CELULAR</ion-label>
<ion-input name="cel" [(ngModel)]="cel" class="celular" type="cel" ></ion-input>
</ion-item>
<ion-item class="i">
<ion-textarea name="desc" [(ngModel)]="desc" class="desc" maxLength="500" placeholder="ESCREVA MAIS DETALHES (TEMA DA FESTA, CORES)"></ion-textarea>
</ion-item>
<ion-button fill="solid" expand="block" class="btn" (click)="sendEmail()">ENVIAR</ion-button>
</ion-grid>
</ion-content>
.title{
margin-right:10%;
}
.header {
--background : rgba(248, 248, 248, 0.5);
}
.teste{
// --background: url('/assets/images/fundo.png') no-repeat center ;
position:absolute;
top:0;
left:0;
z-index:11;
background-color: goldenrod;
width:100%;
height:100%;
}
.nome,.evento,.select,.convidados,.data,.telefone,.celular
,.desc{
font-size: 20px;
color: rgb(32, 79, 207);
font-weight: bold;
}
.a,.b,.c,.d,.e,.f,.g,.h,.i{
opacity: 0.5;
border: 2px solid #ffffff;
}
