How to make content not under the footer?

Navigation
1

I'm having trouble creating a footer that always stays at the end of the page because the text of the content div is getting below the footer. I have tried several things, the code looks like this: 

<div class="tudo">
<div class="header">
</div>

<div class="conteudo">
</div>

<div class="rodape">
</div>

</div>

CSS: 

html, body {
    margin: 0;
    height: 100%;
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 10pt;
    color:#2B2B2B;
    background-color:#F1F1F1;   }

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

* html #tudo {
height: 100%; }

#header {
    background-color:#5B5B5B;
    height:100px; }

#conteudo {
margin: 0 auto;
padding-bottom: 300px; }

#rodape {
    color: white;
    background-color:#1E1E1E;
    padding: 5em 0 2em 0;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 200px;
    width: 100%; }
    
asked by anonymous 08.10.2015 / 15:45

3 answers

0
#conteudo {
   margin: 0 auto;
   height:100%; //Está faltando esta linha no conteúdo
   padding-bottom: 300px; }
    
08.10.2015 / 16:22
0

Generally I define 100% for the divs wrappers when you already have a parent setting the wrap of the site as your <div class="tudo'> , then do the following: 

.header, .conteudo, .rodape{
   float:left;
   width:100%
}
    
08.10.2015 / 16:33
0

In this layout the only thing that can do this is maybe the fact that you are defining attributes like class and then try to format it as id .

Applying a fix in the framework, where you should switch from class to id the problem disappears. 

<div id="tudo">
<div id="header">
</div>

<div id="conteudo">
</div>

<div id="rodape">
</div>

</div>

Instead of being div with layers containing other div , it is not bad until, the browser will interpret this normally, but for whoever is writing the structure getting lost in this repetition of tags becomes a confusing at times and annoying. There are several ways to improve this structure without much effort, using semantic elements of HTML5 makes it easier to read and identify parts.

I leave this small example of how you could leave some more semantic elements . 

header, footer {
			display:block;
		}
		html, body, div, h1, h2, h3 {
			margin: 0;
			padding: 0;
		}
		html { background: #0f0f0f; }
		body {
			width: 700px;
			margin: 0 auto 2em;
		}
		header {
			background: rgb(76, 67, 65);
			height: 96px;
			padding: 32px 0 0 2%;
		}
		
		#conteudo { background: #fff; padding: 32px 2% 0 2%; }
		
		footer {
			background: rgb(100, 98, 102);
			height: 50px;
			
			padding: 32px 0 0 2%;
			clear: both;
		}
<!doctype html>
<html>
	<head>
		<title>Another Fixed Layout</title>
	</head>
	<body>
		<header><h1>Another Fixed Layout</h1></header>
		
		<div id="conteudo">
		
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero quis libero suscipit dignissim sit amet eu velit. Morbi libero purus, vulputate vitae turpis ut, dictum condimentum magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum suscipit elementum. Integer ante mi, rutrum vitae egestas id, condimentum mattis orci. Sed id hendrerit justo. Nullam congue sit amet nibh id imperdiet. Vivamus vitae nibh vel eros blandit mattis eget eu elit. Aenean gravida enim vel dolor faucibus, fermentum sodales augue porta. <br/><br/>
		Aliquam id laoreet nulla. Etiam ut porta sapien, eget ultrices orci. Sed suscipit nisi turpis, a molestie velit hendrerit sit amet. Phasellus tortor ligula, sodales cursus sapien vitae, porttitor dapibus justo. Donec sagittis et lorem eget blandit. Praesent tristique finibus erat, vitae posuere nisi sagittis sed. Etiam tincidunt eu mi quis mollis. Pellentesque mattis dolor risus, vel ornare leo ultricies ut. Suspendisse consequat libero quis lacus dapibus, tristique sollicitudin justo sodales. Duis blandit lacus sit amet nisl ultrices varius. Morbi porttitor, nisi faucibus iaculis accumsan, diam dui sodales est, sit amet tempor diam mauris quis nisl. Aliquam nec convallis leo. Pellentesque lobortis, metus vel blandit iaculis, ante purus sodales elit, quis laoreet lorem augue molestie nunc. Suspendisse sagittis urna eu nisl ornare dignissim. Ut porttitor velit neque, vitae condimentum ligula aliquam a. <br/><br/>
		Duis sagittis placerat ipsum, a pharetra turpis tincidunt sed. Nulla placerat venenatis justo sed tempus. Nunc congue justo eget luctus pharetra. Donec maximus velit lectus, quis eleifend libero interdum vitae. In faucibus vehicula dui, quis lobortis turpis condimentum sed. Phasellus condimentum elementum nunc ut aliquet. In sem ante, venenatis id viverra non, facilisis ut nulla. Donec ac lacinia tortor. Vivamus finibus mollis mauris. Aenean at eros ornare, hendrerit lorem et, bibendum tellus. Ut vel tortor placerat, dignissim nunc in, accumsan dui. Sed ac diam nec elit feugiat tristique. Cras non feugiat dui. In quis mollis diam, nec blandit neque. <br/><br/>
		Curabitur tincidunt sed est vitae pretium. Duis at arcu finibus, ornare turpis nec, commodo dolor. Pellentesque elit diam, ullamcorper et pulvinar id, pharetra in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis semper odio ut porta. Donec a vulputate justo, vitae finibus nulla. Donec nibh risus, commodo ac euismod et, sollicitudin quis erat.<br/><br/>
		Nam vitae elit leo. Proin pretium, turpis rutrum posuere commodo, mauris sapien sodales nunc, at eleifend nunc lectus ut justo. Donec dui neque, hendrerit ut fermentum blandit, sagittis non nisi. Nulla nisi odio, sodales nec hendrerit in, aliquam at ligula. Pellentesque aliquam rhoncus hendrerit. Fusce venenatis ultrices dolor. Praesent ante ex, auctor in fringilla auctor, malesuada vitae mi. Nam dictum elementum iaculis. Nam rhoncus enim sit amet mauris finibus ullamcorper non quis neque. Cras felis nisl, porta ac molestie ut, venenatis et turpis. Phasellus eget convallis dolor, in ultricies sapien. Sed porttitor tortor ut rhoncus tempor. Donec id molestie enim, in consectetur nisl. Donec vel est id nunc euismod ornare in pulvinar ipsum. Integer volutpat elementum neque, id suscipit tortor scelerisque in. <br/><br/>
			
			
		</div>
		
		<footer>Copyright &copy; 20XX -</footer>
	</body>
</html>
    
08.10.2015 / 18:06
Matrix with dynamic columns? Error opening H2 Database