Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by bazinga
bazinga
1,994 Points

How to get DIV to fill available space within its parent DIV?

How to get DIV to fill available space within its parent DIV?

<html> <head> <link href="css/normalize.css" rel="stylesheet" type="text/css"> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="wrap"> <header> <div class="ilogo"><a href="#">Sleeve</a></div> <ul class="nav"> <li><a href="#">Adobe After Effects</a></li> <li><a href="#">Popular items</a></li> <li><a href="#">Stock Footage</a></li> <li><a href="#">Motion Graphics</a></li> </ul> </header> <div class="c-wrap"> <section class="f-side col"> <p> Te fugiat noster aute deserunt, sint laboris ab laborum, laborum eram commodo qui deserunt philosophari id nostrud. Ne incurreret relinqueret, est cernantur praetermissum, elit si te eram admodum, duis ita occaecat in est nulla fidelissimae, quo fabulas distinguantur, eu aut despicationes, ne a sint cernantur. A nescius a expetendis. Ne cillum expetendis, magna si quo magna mentitum. Proident quem voluptate litteris te esse quamquam si consequat, laboris labore sint admodum quem, multos fabulas litteris, nisi nostrud expetendis, quo irure e quis quo ullamco illum nulla est aliqua, si in summis duis legam. Ad eu aliqua arbitror. Est proident reprehenderit, quamquam ab excepteur de incurreret cohaerescant quo aliquip de est cillum dolor in commodo. Ex ipsum cernantur.</p> </section> <section class="l-side col"> <p>Malis arbitrantur mentitum culpa tempor, ut lorem tractavissent, ut cillum consequat et ne veniam transferrem, hic irure fugiat de pariatur, o ubi comprehenderit, nam aliqua esse est tempor id dolore ne cernantur. Eu hic amet officia, aliqua deserunt philosophari ne o quae vidisse deserunt, si summis irure id occaecat, officia ad nulla e sunt se do cillum singulis, incididunt sed elit pariatur, malis eiusmod si sempiternum. Vidisse ipsum de possumus transferrem, nostrud noster aliqua officia lorem eu et tamen ingeniis e laboris ne ullamco. De dolor esse est nostrud.</p> </section> </div> <footer> All Rights Reserved </footer> </div> </body> </html> 

/* Basic Styles
-------------------------------*/
* {
    box-sizing: border-box;
}
body {
    font: normal 1.1em 'Montserrat';
}
html,
body,
.wrap
.c-wrap {
    height: 100%;
}
/* Color Styles
--------------------------------*/
body { background: #f7f7f7;}
.ilogo {
    background: #fa4848;
}
.nav li {
    background: #a76fff;
}
header {
    background: #292929;
}
.f-side {
    background: #a76fff;
}
.l-side {
    background: #35c493;
}
footer {
    background: #333333;
}
/* Header
----------------------------------*/
header {
    padding: 15px;
}
header a {
    color: #fff;
    text-decoration: none;
}
.ilogo {
    border-radius: 4px;
    text-align: center;
}
.ilogo a {
    display: block;
    padding: 20px;
    font-size: 25px;
    text-transform: uppercase;
}
.nav li {
    list-style: none;
    text-align: center;
    margin-top: 10px;
    border-radius: 4px;
}
.nav {
    padding: 0;
}
.nav a {
    display: block;
    padding: 10px;
}
/* Column Layouts
----------------------------------*/
.col {
    padding: 10px;
}
/* footer
------------------------------------*/
footer {
    color: #fff;
    padding: 20px;
    text-align: center;
}

alt text

bazinga
bazinga
1,994 Points

i found only on solution

/*-------------*/
.c-wrap {
display:flex;
flex-direction: column;
flex-wrap: wrap;
}
.col {
flex-grow: 1;
}

but my footer, overflow content alt text

bazinga
bazinga
1,994 Points

And How to solve problem whith footer and who knows some solutions how to get DIV to fill available space within its parent DIV?

Mateusz Hyla
Mateusz Hyla
4,658 Points

I always was doing it with % like.

.parent_div{ width: 300px; height: 300px; }

.child_div{ width: 100%; height: 100%; }

Considering child div is inside parent div.

BTW. Where can I find info about BBCodes on this forum ?

bazinga
bazinga
1,994 Points

No, my parent_div doesnt have exact height. I need to make parent_div's height depends from child content divs, and if content too small, child content divs should expand in height to make the page more voluminous