Why is my footer not getting full screen? [closed]

Navigation
0

I'm trying to make my footer get 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

    
asked by anonymous 31.03.2016 / 02:05

2 answers

2

A Faster and shorter Solution:

The fastest dirty solution to resolve this would be to apply a position:absolute; ( read about positions ), footer . However I am not 100% sure that it will solve the problem because it will depend on several aspects, such as styles applied to elements prior to this element, etc.

  

It will also be necessary to apply a margin-bottom to body or the wrapper / container element that 'holds' all content, depending on the size of the footer to prevent body content is superimposed by footer .   In other words - The% of content of the body of the site should be equal or greater to size margem-bottom of height 

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 one to fix it, as it may overlap with other elements and cause a poor user experience if not applied properly.

So the best way is to get the entire footer element and change it, or move it out of the container / wrapper that holds all content. I created here a brief example of what is happening and what you can do to solve it.

Examples:

  • This is an idea of how it should be found at the moment - link
  • This is an example of how it will look if you move it out of the wrapper / container - link
  • And this is an example of the first method I mentioned to you first, using only the footer property - link
31.03.2016 / 04:16
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">&nbsp;</div>
    </body>
</html>

Give an UP if you have a server.

    
31.03.2016 / 19:29
java.lang.NullPointerException: Attempt to read from field 'java.lang.String call a locally designated variable