How do I take this scroll off the screen and make it responsive?

Question

People how do I take this Scroll that appears when I open this page on smaller screens? I would like to leave it responsive tbem and with the login card in the middle of the page with margin top and bottom more without creating scroll(scroll bar), if anyone can help me thank you.

<style>
    body{
        margin:0;
        padding:0;
    }

    .body-custom {
        height: 100%;
    }

    .logincard {
        margin: auto;
        position: relative;
        max-width: 360px;                            
    }

    .loginlogo {
        text-align: center;
        padding: 30px 15px 10px;
        margin: 0;
    }

    .card-footer-p16 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .pmd-textfield-focused {
        background-color: #001E80;
    }

</style>

<div class="container">
    <div class="logincard ">
        <div class="pmd-card pmd-z-depth">
            <div class="login-card">
                @using (Html.BeginForm("Login", "Acesso", FormMethod.Post))
                {
                    <div class="pmd-card-title text-center">
                        <h1 class="loginlogo">
                            <img src="/images/SSP.png" alt="Secretaria de Estado de Segurança Pública" class="img-responsive logo_login">
                        </h1>
                        <h3>
                            <strong>ANÁLISE CRIMINAL</strong>
                        </h3>
                    </div>

                    <div class="pmd-card-body">
                        @if (!string.IsNullOrWhiteSpace(ViewBag.errorMessage))
                        {
                            <div class="alert alert-warning" style="text-align:center;">@ViewBag.errorMessage</div>
                        }
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="Usuario" class="control-label pmd-input-group-label">Usuário</label>
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="material-icons md-dark pmd-sm">perm_identity</i>
                                </div>
                                <input type="text" class="form-control" id="Usuario" name="Usuario"><span class="pmd-textfield-focused"></span>
                            </div>
                        </div>
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="Senha" class="control-label pmd-input-group-label">Senha</label>
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="material-icons md-dark pmd-sm">lock_outline</i>
                                </div>
                                <input type="password" class="form-control" id="Senha" name="Senha"><span class="pmd-textfield-focused"></span>
                            </div>
                        </div>
                    </div>

                    <div class="pmd-card-footer pmd-card-footer-no-border card-footer-p16 text-center">
                        <button type="submit" class="btn pmd-ripple-effect btn-primary btn-block">Login</button>
                    </div>
                }
            </div>
        </div>                
    </div>

    <footer class="text-center footer">
        <hr />
        <p>
            &copy; @DateTime.Now.Year - Secretaria de Estado de Segurança Pública - SSP/SMT - Subsecretaria de Modernização Tecnológica.<br />
            Versão: @ViewBag.versao
        </p>
    </footer>
</div>

Answer 1

Add this to your Tyles :

.container {
    max-height:100% !important;
    overflow:hidden;
}