0

Quando eu coloco um background no meu <div>.

Código HTML:

<footer>
    <div class="footer-top">
        <div class="fcontainer">
            <div class="frow">
                <div class="col-md-3 col-sm-6 col-xs-12 segment-one md-mb-30 sm-mb-30">
                    <h2>Divinector</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro possimus, nam dolor ullam eum, maiores ratione repudiandae in mollitia nulla dolore fuga deleniti facere sequi natus vel, reprehenderit earum hic.</p>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 segment-two md-mb-30 sm-mb-30">
                    <h3>Links Úteis</h3>
                    <ul>
                        <li><a href="#">Eventos</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Hosting</a></li>
                        <li><a href="#">Career</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 segment-three sm-mb-30">
                    <h3>Follow Us</h3>
                    <p>Please follow us on our Social Media Profile in order to keep updated. Lorem ipusm dolor sit amet, consectetur adipisicing leit. Ex, libero.</p>
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-instagram"></i></a>
                    <a href="#"><i class="fa fa-linkedin"></i></a>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 segment-four sm-mb-30">
                    <h3>Notícias</h3>
                    <p>Se inscreva para receber notícias relacionadas a inovação e ao mundo do empreendedorismo!</p>
                    <form action="">
                        <input type="email">
                        <input type="submit" value="Inscreva-se">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <p class="footer-bottom-text">All Right Reserved by &copy;IUT-SH</p>
</footer>

E o código CSS: (só a parte que interessa)

.footer-top{
background: #069370;
padding: 80px 0;
height: auto;
}

body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
background-image: linear-gradient(135deg, #a9e5bb, #6EAF82);
background-attachment: fixed;
}

Como fica:

inserir a descrição da imagem aqui

8
  • Olá Erick seja bem vindo!! Seria interessante colocar o resto do código CSS para analisar melhor qual parte esta aplicando esse outro tom de verde, uma solução bem "porca" é mudar para background: #069370 !important; Commented 14/03/2020 às 21:41
  • @ThiagoCosta N funcionou o !important e ja editei o codigo na pergunta tbm Commented 14/03/2020 às 21:48
  • Inspecione o elemento da div que tem class="segment-two" e tente localizar o background veja de onde esta vindo Commented 14/03/2020 às 21:59
  • @ThiagoCosta verde mais claro esta vindo do body e o escuro do div q é o 'footer-top' Ele proprio nao tem background Commented 14/03/2020 às 22:04
  • div do footer-top está cobrindo toda a altura do conteúdo? Commented 14/03/2020 às 22:15

3 Respostas 3

0

Consegui resolver colocando um display: table; no div class="footer-top" e colocando display: table-cell; nos div que estao a seguir:

.footer-top{    
    background-color: #069370;
    padding: 80px 0;
    display: table;
}

.segment-one,
.segment-two,
.segment-three,
.segment-four{
    display: table-cell;
}
0

O problema é que você está usando Bootstrap 3, quando deveria usar o 4 (e o 5 está perto de sair).

O Bootstrap 3 aplica float: left nas divs .col, ou seja, todas as divs dentro de .frow do seu HTML estão com float: left, e isso resulta no problema que você está enfrentando. O float faz com que as divs "flutuem" e a div principal fique sem altura.

Já que quer usar Bootstrap, considere seriamente em migrar para o 4, que trabalha com flexbox que, além de ser muito mais fácil criar layouts, você não terá esses tipos de problemas. O BS 3 é muito ultrapassado.

Se você observar, o fundo verde escuro possui exatamente 160px de altura, que é o valor do padding: 80px 0 da div .footer-top. E no inspecionador de elementos do navegador mostra que a div .fcontainer está com height 0, ou seja, não há nada dentro dela que ocupe espaço, por causa do float:

inserir a descrição da imagem aqui

Você resolve isso facilmente com um clearfix. O Bootstrap possui classe nativa para isso. Basta adicionar a classe .clearfix na primeira div do footer e o problema está resolvido:

<div class="footer-top clearfix">
                          ↑

Outra coisa: retire esse height: auto porque o height já é auto por padrão (o width também).

Teste:

Execute o código abaixo em tela cheia.

.footer-top{
background: #069370;
padding: 80px 0;
}

body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
background-image: linear-gradient(135deg, #a9e5bb, #6EAF82);
background-attachment: fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<footer>
    <div class="footer-top clearfix">
        <div class="fcontainer">
            <div class="frow">
                <div class="col-md-3 col-sm-6 col-xs-12 segment-one md-mb-30 sm-mb-30">
                    <h2>Divinector</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro possimus, nam dolor ullam eum, maiores ratione repudiandae in mollitia nulla dolore fuga deleniti facere sequi natus vel, reprehenderit earum hic.</p>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 segment-two md-mb-30 sm-mb-30">
                    <h3>Links Úteis</h3>
                    <ul>
                        <li><a href="#">Eventos</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Hosting</a></li>
                        <li><a href="#">Career</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 segment-three sm-mb-30">
                    <h3>Follow Us</h3>
                    <p>Please follow us on our Social Media Profile in order to keep updated. Lorem ipusm dolor sit amet, consectetur adipisicing leit. Ex, libero.</p>
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-instagram"></i></a>
                    <a href="#"><i class="fa fa-linkedin"></i></a>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 segment-four sm-mb-30">
                    <h3>Notícias</h3>
                    <p>Se inscreva para receber notícias relacionadas a inovação e ao mundo do empreendedorismo!</p>
                    <form action="">
                        <input type="email">
                        <input type="submit" value="Inscreva-se">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <p class="footer-bottom-text">All Right Reserved by &copy;IUT-SH</p>
</footer>

0

Você pode tentar dar um overflow:scroll; para que as propriedades se estendam além, isto é, até a "borda" do conteiner em que você deseja estender as propriedades (body ou então footer-top).

Obs: esta solução vai meio que forçar as propriedades a se estenderem, portanto é um paliativo, mais interessante seria encontrar o que causou de fato o problema. Se quiser esconder a barra lateral que aparece com o overflow escreva overflow: hidden;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .