How to extend divs height till the footer at the bottom

问题

I have troubles here I want that container color with linear gradient to go till the bottom to stick with the footer no matter does it have so much content for that Div container or not IF the sidebar has content more than the container and vice versa. Sidebar has no background color that color is from the parent wrapper Div. Also the footer I need to be sticked at the bottom after the content ends not to display empty spaces there.

Here are my codes:

CSS:

#pjesa-kryesore{ /*main wrapper */
    display:flex;
    max-width: 98%;
    margin:0px auto;
} 


/* Permbajtja (container) */
#permbajtja{
    flex-grow:1;
    background:-webkit-linear-gradient linear-gradient(#fff,#bdbdbd);
    background:-o-linear-gradient linear-gradient(#fff,#bdbdbd);
    background:-moz-linear-gradient linear-gradient(#fff,#bdbdbd);
    background:linear-gradient(#fff,#bdbdbd);

    font-family: Open Sans;
    padding:30px;

}


/* Sidebar */
#sidebar-majtas{
    width:350px;
    flex-shrink:0;
}

.menu{
    background:-webkit-linear-gradient linear-gradient(#5b91e9,#a0c3fb);
    background:-o-linear-gradient linear-gradient(#5b91e9,#a0c3fb);
    background:-moz-linear-gradient linear-gradient(#5b91e9,#a0c3fb);
    background:linear-gradient(#5b91e9,#a0c3fb);

    border-radius: 15px;
    text-align: center;
    font-family: Open Sans;
    margin: -45px auto 15px auto;
    padding: 20px 5px;
    width: 270px;
}

.menu-btn{
    text-decoration: none;
    color:#fff;
    display: block;
}

.menu-btn:hover{
    color:#555;
}


/* Footeri */
#footer{
    position:absolute;
    left:0px;
    bottom:0px;
}

HTML:

<div id="pjesa-kryesore">
        <div id="sidebar-majtas">
            <div class="menu">
                <a href="index.html" class="menu-btn padding">Ballina
                <br><span style="font-size:12px"> Informacionet ...</span>
                </a>
                <a href="#" class="menu-btn padding">Link 2
                <br><span style="font-size:12px"> Informacionet ...</span></a>
                <a href="#" class="menu-btn padding">Link 3
                <br><span style="font-size:12px"> Informacionet ...</span></a>
            </div>
            </div>    
        <div id="permbajtja">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida, quam non consequat blandit, ligula elit dignissim sapien, et luctus eros arcu et purus. Donec efficitur mi in mi luctus gravida. Suspendisse magna eros, mollis at lobortis sollicitudin, pharetra ac arcu. Cras vitae dignissim nunc. Aliquam eu felis ut neque placerat accumsan vitae at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer pellentesque venenatis hendrerit. Sed pretium eleifend lorem nec maximus.

Morbi commodo lectus a nulla varius faucibus. Morbi id turpis sed odio pretium tincidunt. Nullam a elit id turpis commodo interdum at a nunc. Nam imperdiet dictum tortor. Pellentesque eu molestie tortor. Vivamus sit amet dolor posuere, tristique libero id, aliquam dui. Aliquam elit nulla, pellentesque quis magna eu, imperdiet lobortis nibh. Donec et egestas ante, eget porttitor nisi. Integer porttitor luctus justo.
        </div>
    </div>
    <div id="footer">(C) Copyrighr...</div>

UPDATE: (Media screen query)

@media all and (max-width: 800px) {

    #pjesa-kryesore {
        flex-flow:column;
    }

    /* Make the sidebar take the entire width of the screen */

    #sidebar-majtas {
        width:auto;
    }

}

回答1:

For problems such as this, I prefer to use the calc() CSS functions along with the sizing attribute of vh, which stands for viewport height.

For example, give your content the style of:

height: calc(100vh - 300px);

The 100vh means 100% height of the viewport (browser window).

Change the 300px accordingly so that it is the exact height of your header. If you do this live within developer tools, you'll be able to match it up perfectly.

来源：https://stackoverflow.com/questions/30793194/how-to-extend-divs-height-till-the-footer-at-the-bottom