Not painting my entire <div>

Question

When I put one background in my <div>.

HTML code:

<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>

And the CSS code: (only the part that matters)

.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;
}

How does it look:

Answer 1

I managed to solve by putting a display: table; in the div class="footer-top" and putting display: table-cell; us div who are next:

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

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

Answer 2

The problem is that you are using Bootstrap 3 when you should use 4 (and 5 is close to leaving).

The Bootstrap 3 applies float: left on the Divs .col, that is, all Ivs within .frow of your HTML are with float: left, and this results in the problem you are facing. The float causes the Divs to "float" and the main div to run out of height.

Since you want to use Bootstrap, seriously consider migrating to 4, which works with flexbox which, besides being much easier to create layouts, you will not have these kinds of problems. BS 3 is very outdated.

If you look, the dark green background is exactly 160px high, which is the value of the padding: 80px 0 of the div .footer-top. And in the browser element inspecter shows that the div .fcontainer is with height 0, that is, there is nothing within it that occupies space, because of the float:

You solve this easily with a clearfix. Bootstrap has native class for this. Just add the class .clearfix in the first div of the footer and the problem is solved:

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

Something else: withdraw that height: auto because the height already is auto by default (the width also).

Testing:

Run the code below in full screen.

.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>

Answer 3

You can try to give a overflow:scroll; to extend the properties beyond, that is, to the "edge" of the container in which you want to extend the properties (body or then footer-top).

Note: this solution will kind of force the properties to extend, so it is a palliative, more interesting would be to find what actually caused the problem. If you want to hide the sidebar that appears with overflow type overflow: hidden;