CSS CSS espaço no rodapé feito com css

Natanael Marrafon Rocha · 13 de fevereiro de 2019

Estou em desenvolvimento de um site e estou com um pequeno problema, estou fazendo o rodapé do site, estou tentando fazer via CSS e lá embaixo na tela de rolagem sempre fica um espaço entre o site e o rodapé só que infelizmente ele fica colocado na tela de postagem, tentei colocar "position:absolute" e mandar o rodapé para baixo e até mesmo fiz com o "position:relative" com o comando "top:10px" da o espaço que eu queria entre a tela de postagem e o rodapé só que ao fazer isso ele fica colado no final da tela como está na imagem qual é o melhor jeito de fazer para deixar o espaço entre a tela de postagem e o rodapé e tambem entre o rodapé e o final do site ? tentei dar padding também, só que como não é uma imagem que estou colocando como rodapé ele apenas continua o rodapé para baixo não estou conseguindo deixar o espaço como é a melhor maneira ? o meu site tem o menu com "position:fixed" e um "padding:top" para empurrar o "pai" para baixo porisso o menu esta flutuando ai.

HTML

<!DOCTYPE HTML>
<html lang="pt-br">
    <head>
        <meta charset="utf-8"/>
        <title>Site</title>
        <link rel="stylesheet" type="text/css" href="css/estilo.css"/>
    </head>
    <body>
        <div class="menu">
            <ul>
                <li><a href="index.html">Inicio</a></li>
                <li><a href="localizacao.html">Localização</a></li>
                <li><a href="contato.html">Contato</a></li>
                <li><a href="sobre.html">Sobre</a></li>
            </ul>
        </div>
        <div class="banner1">
        <img src="imagens/clinica1.jpg" width="995px" height="200px">
        </div>
        <div class="tela">
        <div class="meio"></div>
        </div>
        <div class="rodape">
        </div>
    </body>
</html>

CSS

body {
    padding-top:100px;
    
}

.menu {
    position:fixed;
    top:0;
    left:200px;
    z-index:1;

}

.menu ul li {
    display:inline-block;
    background-color:#02ECFD;
    padding:30px;
    border-radius:20px 0 20px 0; 
    font-family:Arial Black;
}

.menu ul li a {
    text-decoration:none;
    color:white;
    
}

.menu ul li:hover {
    background-color:#038EF8;
}

.tela {
    width:995px;
    height:720px;
    background-color:#02ECFD;
    border-radius:20px 0 20px 0;
    position:relative;
}

.tela .meio {
    border-radius:20px 0 20px 0;
    width:950px;
    height:690px;
    background-color:#FFFFFF;
    position:relative;
    left:25px;
    top:20px;
}

.banner1 img {
    border-radius:20px 0 20px 0;
}

.rodape {
    width:995px;
    height:125px;
    background-color:#02ECFD;
    border-radius:20px 0 20px 0;
}