0

Tenho o seguinte HTML:

<body>

    <div class="todo">
        <button class='button'>Login</button>
        <div class="topo">
            <h1 class="h1Centralizado">
                <?php echo $constantes->getTituloSite(); ?>
            </h1>
        </div>
        <div class="cont">
                <?php require_once("indexConteudo.php"); ?>
        </div>
        <div class="final">
                <?php require_once("celula/_requeridos/final.php"); ?>
        </div>
    </div>

</body>

E o seguinte CSS:

html, body, .todo {
    min-height:100%
}
html {
    font-family: 'Open Sans';
    font-size: 1em;
    background-image: radial-gradient(rgb(172,204,193) 20%, rgb(40, 22, 111));
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: content-box;
}

O objetivo é fazer com que a div.rodape esteja sempre o final da página.

Porém, quando o conteúdo da página não enche toda a página tenho um problema pois a div.rodape fica lá em cima como na imagem abaixo: inserir a descrição da imagem aqui Como fazer com que em qualquer situação, a div.rodape sempre esteja no fim da página?

Esse erro pode ser visto em

http://wesleyanagceu.com.br/

Obs.: Não gostaria de usar position: fixed e nem position: absolute por causa da posição fixa que isso gera.

4
  • @hugocsl, por favor, esse questão NÃO é duplicata pois não permite display: flex como solução. Por favor, desmarca ela como duplicata. Commented 21/01/2019 às 13:56
  • .cont { min-height: calc(100vh - 120px); } Commented 21/01/2019 às 14:27
  • Carlos adicionei outra Duplicada que atende seu critério. pt.stackoverflow.com/a/86214/97477
    – hugocsl
    Commented 21/01/2019 às 14:27
  • então, valeu, nas minhas tentativas fiz algo parecido com isso. fiz: na ultima did margin-bottom: 0; e position: relative; e no html, body, { min-height:100% } Commented 21/01/2019 às 16:50

0

Pesquise outras perguntas com a tag .