dj kim Posted March 21, 2006 Share Posted March 21, 2006 HiI had following problem several times:I have a block e.g. a div whit a defined height and inside 2 divs, one also with a defined height. How can I have the other div taking all the height left?My code: <div id="container" style="height:100px; width:100px;"> <div id="sub1" style="height:20px; background-color:green; margin:0px;"></div> <div id="sub2" style="???????????; background-color:red; margin:0px;"></div></div> What has the style for sub2 to be in order to get the upper 20px in green and the lower in red? Without putting the height to 80px of course... in order to be flexible when changing height of container.Would apreciate your help a lot Link to comment Share on other sites More sharing options...
pulpfiction Posted March 21, 2006 Share Posted March 21, 2006 Hi,try Height:100% in the sub2 Link to comment Share on other sites More sharing options...
boen_robot Posted March 21, 2006 Share Posted March 21, 2006 By the way:background-color:green;notbackground-color=green; Link to comment Share on other sites More sharing options...
dj kim Posted March 21, 2006 Author Share Posted March 21, 2006 Hi,try Height:100% in the sub2<{POST_SNAPBACK}> No, this renders you sub2 to the same height as his parent (container).Other suggestions? Link to comment Share on other sites More sharing options...
pulpfiction Posted March 21, 2006 Share Posted March 21, 2006 hi dj, sorry gave u wrong info, my bad Link to comment Share on other sites More sharing options...
boen_robot Posted March 21, 2006 Share Posted March 21, 2006 80% in sub2 and 20% to sub1?[edit]posted similtaniously with pulpfiction [/edit] Link to comment Share on other sites More sharing options...
pulpfiction Posted March 21, 2006 Share Posted March 21, 2006 hi boenI guess dj wants the sub1's height to be 20px and the sub2 to take up the rest... Link to comment Share on other sites More sharing options...
dj kim Posted March 21, 2006 Author Share Posted March 21, 2006 hi dj, sorry gave u wrong info, my bad<{POST_SNAPBACK}> Hi pulpfiction, thx for your helpBut I tried it. Even with your code. If you switch between your 100% and 80px you see the difference. with 100% sub2 has a height of 100px Link to comment Share on other sites More sharing options...
dj kim Posted March 21, 2006 Author Share Posted March 21, 2006 Hi boenYes pulpfiction is right. Imagine a sub1 as header which has to be always the same height (for a logo or so) sub2 should take up the rest, even if the height of container changes... Link to comment Share on other sites More sharing options...
boen_robot Posted March 21, 2006 Share Posted March 21, 2006 Oh well... another idea:Apply all the properties of sub2 to the container. This creates the illusion that it's sub2 which is configured. This would look ugly if there were margins though. Link to comment Share on other sites More sharing options...
thundercade64 Posted March 22, 2006 Share Posted March 22, 2006 dj,Why do you not want to give sub2 a specific height (of 80px)? I only ask, because if you need container to be 100px, and you need sub1 to be 20px, and you need sub2 to take up the rest, there should be nothing wrong with setting sub2 to 80px. Is there? Link to comment Share on other sites More sharing options...
dj kim Posted March 22, 2006 Author Share Posted March 22, 2006 dj,Why do you not want to give sub2 a specific height (of 80px)? I only ask, because if you need container to be 100px, and you need sub1 to be 20px, and you need sub2 to take up the rest, there should be nothing wrong with setting sub2 to 80px. Is there?<{POST_SNAPBACK}> hi thundercadeWell if i want to change the containers height because of design changes. In this case it would not be to hard but with more complex design with cascaded boxes etc. Let's say container is a box which hasn't got a fix pixel-height but takes 20% of the body height...The point is I had some designs where I put it in the end with all fix heights, like you suggest. Then if there was something to change, like adding some pixels to the top-boxes height...I had to change all heights of the childs, childs chils, and so on... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now