Rodapé não fica no fim da pág. responsivo

falkss · 27 de fevereiro de 2017

Boas, pessoal!

Estou construindo um código para ter melhor noção de HTML e ocorre o seguinte: consigo colocar o rodapé no fim da página, independente do conteúdo, porém quando faço o teste para ver se está "responsivo", ou seja, redimensiono o navegador para o menor tamanho esse rodapé fica perdido em meio aos textos. Estou utilizando o método do corpo da página em position relative, e o rodapé em position absolute, sabem onde estou errando ou tem alguma dica de como poderia fazer de forma diferente? colocarei o código do html e css abaixo.

PS1: Notei que o problema é no float, porém estou utilizando o clear, não resolveria o problema?

PS2: Criei uma div com uma class e apenas coloquei o "clear: both" e funcionou agora. Minha pergunta agora é: por que não funcionou antes quando coloquei na próxima div que vinha, que era a "footer", e fui obrigado a criar uma apenas para isso?

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="css/estilo.css">
    </head>
    
    <body>
        <div id="tudo">
            <div id="topo">
                <header>
                    <img src="img/logo.png">
                    <nav id="menu">
                        <ul>
                            <li><a href="#">home</a></li>
                            <li><a href="#">notícias</a></li>
                            <li><a href="#">sobre</a></li>
                        </ul>
                    </nav>
                </header>
            </div>
            
            <div id="conteudo">
                <hr>
                <section>
                    <div class="esq">
                        <h1>Texto ***** pra *****</h1>
                        <p>In ex duis voluptate, nostrud elit sunt pariatur lorem sed mentitum magna 
                            possumus, ita aliquip ubi proident. In sunt deserunt et a an quae sunt ipsum, 
                            hic do culpa quis esse, se velit eiusmod quamquam, iis aliqua e enim si vidisse 
                            ne mandaremus, laborum adipisicing ubi excepteur de enim excepteur laboris. 
                            Quibusdam varias irure e dolor, do culpa dolore dolore cernantur. Iis malis sunt 
                            minim cernantur, e iudicem in incurreret, sunt mandaremus praetermissum, non 
                            incurreret familiaritatem. Cupidatat malis incurreret cernantur, in e 
                            illustriora ea et fore labore eu cernantur eu aut eram multos summis vidisse, 
                            nam aliqua ab quorum, nam quae possumus imitarentur si cernantur do illum 
                            fabulas, cupidatat ut tamen consequat. Malis et arbitror aut malis non de velit 
                            nisi fugiat arbitror, si ita eram ingeniis si ne quae eram elit iudicem. A quem 
                            cupidatat concursionibus, an esse sunt minim singulis, cillum consequat 
                            transferrem, a veniam amet tamen quibusdam. Minim singulis illustriora quo 
                            veniam ut non esse excepteur ubi arbitror fugiat quid possumus sint, a illum 
                            cupidatat nostrud do te iis relinqueret ubi mandaremus ubi ingeniis hic non id 
                            culpa dolor velit ab ne incurreret concursionibus.</p>
                    </div>
                    
                    <div class="dir">
                        <h1>Outro texto ***** pra *****</h1>
                        <p>Non senserit iis occaecat, eu cillum appellat eiusmod, nescius culpa labore 
                            laboris amet hic laboris duis doctrina tempor. Se id eram amet ipsum, ab quis 
                            tempor doctrina eu an incurreret consectetur, senserit quae an iudicem 
                            exquisitaque eu quorum incididunt ita nostrud ne an ubi nisi fore quem ad 
                            appellat nam minim, esse doctrina arbitror. Ea commodo graviterque, ad ita nisi 
                            illum noster. Ut an minim doctrina. Ubi noster pariatur transferrem, ne si magna 
                            fabulas, ubi voluptate ita appellat, illum probant familiaritatem, et commodo 
                            philosophari, mentitum id vidisse, ita si transferrem iis ingeniis velit quid 
                            qui aute. Ipsum singulis ubi quorum tamen e quorum nostrud ex ingeniis, si se 
                            quorum nulla nulla, ut ubi aute probant, cupidatat varias qui pariatur 
                            instituendarum o irure sempiternum offendit nisi litteris, singulis ipsum est 
                            quamquam familiaritatem an anim arbitror est aute amet.</p>
                    </div>
                </section>
            </div>
            
            <div id="footer">
                <footer>
                    Made by Falcão Alado 
                </footer>
            </div>
        </div>
        
    </body>

</html>

/*Começo do CSS reset*/
*{
    padding: 0;
    margin: 0;
}

html, body{
    height: 100%;
}
/*Fim CSS reset*/


#tudo{
    position: relative;
    min-height: 100%;
}
/*TOPO*/

#topo{
    min-width: 320px;
    width: 100%; 
    text-align: center;
    margin-bottom: 1%;
}

img{
    max-width: 400px;
    width: 100%;
}

nav#menu ul li{
    display: inline-block;
    margin: 0% 1%;
    border: solid 2px;
}

li a{
    text-decoration: none;
    text-transform: uppercase;
}

/*FIM TOPO*/

hr{
    width: 100%;
    margin: auto;
}


/*COMEÇO CONTEUDO*/
#conteudo{
    min-width: 320px;
    width: 80%;
    margin: auto;
    margin-bottom: 1%;
}

section h1{
    text-align: center;
}

section{
    text-align: justify;
}

section .esq{
    min-width: 320px;
    width: 45%;
    float: left;
}

section .dir{
    min-width: 320px;
    width: 45%;
    float: right;
}

/*FIM CONTEÚDO*/

#footer{
    clear: both;
    position: absolute; /*Força o rodapé sempre para o fim da página*/
    bottom: 0;          /*Força o rodapé sempre para o fim da página*/
    width: 100%;
}

#footer footer{
       text-align: center; 
}

soap.js · 27 de fevereiro de 2017

Eu particularmente odeio utilizar position: absolute, a não ser que seja extremamente necessário.

Então minha dica é que não utilize.

Se você declarar o footer por último, o rodapé virá imediatamente após o penúltimo elemento, ou seja, ele sempre estará no fim da página sem precisar de position absolute e bottom : 0. à menos que o conteúdo do seu site não seja extenso o suficiente.

falkss · 27 de fevereiro de 2017

@soap.js Obrigado pela sua resposta! Um professor meu disse o mesmo, porém procurando achei esse método, e eu pensava em encaixá-lo exatamente em um site sem muito conteúdo, mas a neura agora foi que tentei fazer isso em um que estava com conteúdo, acabei errando onde utilizar isso.

Bom, pelo menos agora sei onde aplicar um ou outro ahhaha, muito obrigado!

soap.js · 27 de fevereiro de 2017

De nada amigo!
E lembre sempre que positioin : absolute não combina muito bem com responsividade.

DiF · 27 de fevereiro de 2017

O atributo position absolute, é bem importante. Ele é usado quando você quer posicionar um elemento que está contido em outro.

Geralmente ele trabalha em conjunto com position relative.

exemplo:

<div class="box">
  <div class="tarja"></div>
</div>

.box{
	width: 300px;
    height: 600px;
    background: green;
    position: relative;
}

.tarja{
  position: absolute;
  bottom: 0;
  width: 300px;
  height: 100px;
  background: rgba(0,0,0,0.5);
}

É errado dizer que não se deve usar.

Veja o exemplo: https://jsfiddle.net/dife/jpgc1vvt/

Agora sobre o rodapé, tem macete para deixar sempre no final que é usando a posição relativa no container da sua página e posição absolute no rodapé.

http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

https://aprendacss.wordpress.com/2008/10/13/rodape-no-final-da-pagina-independente-da-resolucao/

Você ainda pode usar a técnica de adaptação ao invés da responsividade... com os média queries do CSS3

falkss · 28 de fevereiro de 2017

@DiF Muito obrigado, DiF, comprei o livro de CSS3 do Maujor, imagino que ele explique sobre o media queries bem, mas por hora estou satisfeito com o resultado!

DiF · 28 de fevereiro de 2017

@falkss Sim, eu tenho este mesmo livro. Ele explica isso no capítulo 10 página 255.

falkss · 28 de fevereiro de 2017

@DiF Valeu DiF, desculpa as perguntas no fórum, espero que não esteja poluindo, está sendo bastante esclarecedor para mim e imagino que surjam muitas dúvidas ainda ahhaahaah