How to make the content not be below the footer?

Asked

Viewed 288 times

1

I’m having trouble creating a footer that is always at the bottom of the page, because the text of the div content is getting below the footer. I’ve tried several things, the code is 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%; }
html css

  • to make the footer use the pripriprio tag html5 the <footer></footer> and in your css use clear: both, see if it solves.

  • @Rafaelacioly was already using clear: Both. Using tag did not resolve.

3 answers

1

In this layout the only thing that can cause this, maybe it’s the fact that you’re defining the attributes as class (.) and then try to format as id (#).

Applying a correction in the structure, where you should change class for id the problem goes away.

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

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

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

</div>

Instead of writing it down div with layers containing other div, Not bad even, the browser will interpret this normally, but for those who are writing the structure get 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 the elements semantics of HTML5 makes it easier to read and identify parts.

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

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>

0

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

  • I added here and nothing has changed :/

0

Usually I set 100% for Wrapper Ivs when you already have a parent defining the site’s wrap as your own <div class="tudo'>, then do the following:

.header, .conteudo, .rodape{
   float:left;
   width:100%
}

  • The footer was fixed at the bottom of the page as I wanted, but the content continues to be cut and below the footer.

  • add this display:block;

  • No change either. I added padding-bottom to the div everything, which even improved the situation. The problem is that if you zoom in on the page the footer is back on top.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.