reponsivo web site, problem in CSS

2

I was running fine, but I came across a problem in my css ..

One is my footer, that even if I change the background color it gets the background color of the body

Mycsscodeatthetopofthepage:

@importurl('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800');/*CSSDocument*/body{background-color:#eeeeee;margin:0;}.background{overflow:hidden;background:url(../images/fundo.png);background-position:topcenter;min-height:355px;background-repeat:no-repeat;color:#000000;background-attachment:fixed;background-size:cover;}.background.linksul{padding:0;list-style:none;}.background.linksulli{float:right;display:inline-block;margin:020px00;}.background.linksullia{display:block;text-decoration:none;padding-bottom:30px;font-family:'OpenSans',sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;color:#eeeeee;}.background.linksullia:hover{color:#b0fafd;}

mycsscodefromthemiddle/footerpage:

@charset"utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300|Lato:400,300,700);
@import url('https://fonts.googleapis.com/css?family=Cuprum:400,400i,700,700i');
h1 {
    text-shadow: 2px 2px #063960;
}
h2 {
    text-shadow: 2px 2px #00cafd;
}
.backk
{
min-height: 42px;
position: relative;
display: block;
overflow: hidden;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#110851+0,110851+39,cf0404+100 */
background: #110851; /* Old browsers */
background: -moz-linear-gradient(-45deg, #110851 0%, #110851 39%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #110851 0%,#110851 39%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #110851 0%,#110851 39%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#110851', endColorstr='#cf0404',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.row
{
    display: block;
    overflow: hidden;
    background: url(../images/faq.png); 
    background-position: top center;
    height:auto;
    background-repeat: no-repeat;   
    color: #000000;
    background-attachment: fixed;
    background-size: cover;
}
.row h2
{
color: #e2aba7;
font-family: 'Cuprum', sans-serif;
font-weight: 700;
font-size: 48px;
text-align: center;
padding-bottom: 30px;
}
.row p
{
    margin: auto;
    width: 960px;
    font-family: Oswald;
    color: #000000;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 10px;
}
.faq .faqq
{

    overflow: hidden;
    position: relative;
    height:97px;
    width: 97px;
    margin: auto;
    margin-bottom: 35px;

}
.rodape1
{
    overflow: hidden;
    background-color: #10101d;
    position: relative;
    max-height:160px;
    background-repeat: no-repeat;   
    background-size: cover;

}
.logo-rodape{
    float: left;
    overflow: hidden;
    display: block;
    position: relative;
    padding-left: 60px;
    margin-left: 250px;
    margin-top: 5px;

}
.texto{
    float: right;
    overflow: hidden;
    display: block;
    position: relative;
    margin-left: 150px;
    margin:auto;
    font-family: 'Cuprum', sans-serif;
    font-size: 15px;
    color: #fff;
    font-weight: 400;
    line-height: 20px;
}
.texto p
{
    color: #878888;
}
.direitos
{
    overflow: hidden;
    background-color: #161625;
    color: #000000;
    background-attachment: fixed;
    background-size: cover;
    position: relative; 
    background-size: cover;
}
.textoo {
    color: #dd8f89;

    margin: auto;
    position: relative;
    text-align: center;
    font-family: Oswald;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;

}
.textoo p{
    color:#878888;
}
.textoo h3{
    color: #063960;
}
    
asked by anonymous 24.12.2017 / 17:46

1 answer

1

To avoid this type of problem, I suggest putting a background color for each section, and set a background color in body which will also be the background color of the footer.

See the schematic:

html, body{
   margin: 0;
   padding: 0;
   background: red;
}

header{
   display: block;
   width: 100%;
   height: 50px;
   background: yellow;
   float: left;
}

main{
   display: block;
   width: 100%;
   background: #777;
   float: left;
}

footer{
   display: block;
   width: 100%;
   float: left;
}
<header>
   header
</header>
<main>
   <p>conteúdo</p>
</main>
<footer>
   footer
</footer>

This will give the impression that the footer takes up the rest of the page on space.

    
24.12.2017 / 19:40