0
I’m trying to make my footer pick up 100% of the screen, but depending on the resolution is missing a part, as in image 2, the CSS code I’m using in the footer is this:
footer {
width: 100%;
margin: 0 auto;
font-family:Gabriola;
font-size:25px;
color:rgba(255,255,255,1);
background: rgba(73,155,234,1);
background-size:cover;
box-shadow: 0px 0px 0px 4px rgba(53,135,214,1);
}
Am I doing something wrong, or is it a bug? rsrs
2
Fastest and dirty solution to solve this, would be to apply a position:absolute;(read about positions), at the footer. However I am not 100% sure that it will solve the problem as it will depend on various aspects, such as styles applied to elements prior to this element, etc.
It will also be necessary to implement a
margin-bottomat thebodyor the element wrapper/container that 'secures' all content, depending on the size of thefooterto prevent the contents of the body being superimposed byfooter.
In other words - Amargem-bottomthe content of the body of the site, should be equal or greater to the sizeheightoffooter
footer {
width: 100%;
margin: 0 auto;
font-family:Gabriola;
font-size:25px;
color:rgba(255,255,255,1);
background: rgba(73,155,234,1);
background-size:cover;
box-shadow: 0px 0px 0px 4px rgba(53,135,214,1);
position:absolute; /* Adicionada a propriedade 'position absolute' */
}
However this may not be the best way (actually it is not) or the most appropriate to fix it, as it may overlap with other elements and cause a bad user experience if they are not applied properly.
Then the best way is to take the whole element footer and change it, ie move it out of the container/wrapper that holds all the content. I have created here a brief example of what is happening and what you can do to solve it.
position:absolute; - https://jsfiddle.net/av01m2qt/2/0
Well, I think you can make the following attempt.
<html>
<head>
<title></title>
<style type="text/css">
#footer {
width: 100%;
height: 100px;
position: static;
bottom: 0px;
left: 0px;
background-color: #000
}
</style>
</head>
<body>
<div id="container">
conteudo
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>2
</div>
<div id="footer"> </div>
</body>
</html>
Give an UP if you have a server.
Browser other questions tagged css
You are not signed in. Login or sign up in order to post.
It depends on how your document is, that
width: 100%is relative to where that element is. It is in the<body>or within another element?– Renan Gomes
Renan, this error was happening because of a height:100%; inside the body, when I removed it was perfect! I’m not sure why this 100% height caused this, I don’t understand much about html! But thanks to everyone who tried to help me!
– Raizant