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
Aurelian Spodarec
10,801 PointsHow to have height 100% relative to the parent height and fit the box?
I need to have dynamic inside page, that has 100% height, but that doesn't go over the container that it's in.
So the red box, is meant to adapt to the inner height in the page.
The position absolute item should be aligned on the same height. it should respect the parent padding as well.
2 Answers
Dave StSomeWhere
19,870 PointsNot exactly sure what you are trying to achieve...
Is this your desired behavior Fork of your Pen
Samuel Llibre-Pillco
15,467 PointsHi there, with the Developer Tool you can get to know how your browser is interprets your code.
So the problem with your code is you are applying the color to .page instead you need to apply that to .page-inner-default.
you got some others problem but i can't see all the HTML its hard to know and you need to try to get a cleaner CSS and HTML. Like instead of using always <DIV> use, Section or Article for example. on CSS size you use box-sizing with the universal selector "*" and again use it on body. If you use the universal selector body got box sizing apply and all inside the HTML have box-sizing already apply.
I leave you here a quick solution for your code:
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: grey;
box-sizing: border-box;
}
.image {
height: 250px;
border: 1px solid green;
background: green;;
}
.pos-bot {
position: absolute;
bottom: 0;
}
.page {
height: 20cm;
width: 16cm;
margin: 50px auto;
display: inline-block;
vertical-align: top;
position: relative;
}
.page-inner-default {
position: relative;
background-color: white;
padding: 50px;
height: 100%;
border: 1px solid red;
}
.image {
}
Hope i can help ;)
Aurelian Spodarec
10,801 PointsHey. That doesn't solve the problem however.
Also, I want the color to keep on the page, as the page is meant to be white, and the red box is meant to now go outside the page. Also, if you look, if you take the color off the page, there will be more problems.
How come you can't see the whole HTML? Do you have a bug on codepen? Should I post it here on Teamtreehouse?
It shoudn't matter how bad or good the CSS or HTML is, or if it uses semantics. This is just about CSS, a quick dirty draft :)
I would assume, without flexbox, this is tricky to achieve ^^
Though thanks for trying to help :) Appriciate it.
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsI have a div that has a fixed height of 20cm. Now, the inner page needs to have padding and position absolute needs to respect that padding.
How can I make the red box fill always what's left? The position absolute item needs to be always at the bottom no matter what.
It needs to have one class, and not 10classes with 10different heights like 58%, 45% etc...
The red box should be inside where I put it. Not outside it.
The red box should adjust to the remaining height. You can see where there is a heading and image the red box goes futher even more? Both of those boxes should be the same height, no matter what's above, and should be inside the inner page.