Menu
My question is if there is a way, without using JavaScript, to cause child divs to extend to the borders of their parent, without exceeding those borders, when you cannot know beforehand the size of the parent div?
Below is sample markup/styles demonstrating my issue. If you load it into a browser you will see that #two and #three both extend outside their parent, #one, and cause scrollbars to appear.
My issue is not so much the scrollbars, but that I do not know how to tell the child divs to occupy the width or height remaining to them, rather than the full height or width of the parent.
<html> <head> <style> html, body {width:100%;height:100%;margin:0;padding:0;} .border {border:1px solid black;} .margin { margin:5px;} #one {width:100%;height:100%;} #two {width:100%;height:50px;} #three {width:100px;height:100%;} </style> </head> <body> <div id="one" class="border"> <div id="two" class="border margin"></div> <div id="three" class="border margin"></div> </div> </body> </html> 
367
Method 1: First method is to simply assign 100% width and 100% height to the child div so that it will take all available space of the parent div. Consider this HTML for demonstration: HTML.
Here, We have simply add and remove the fixed and absolute CSS classes to keep our child div scroll inside our parent div. We add the absolute css class and remove fixed css class if our parent cross the height of our child div.
You can try adding a fixed height to the parent which might work or put enough content in the child to stretch it; that will work. Show activity on this post. You have margin-bottom set on both elements. With the child having a bottom margin, it will always be smaller by that amount.
If you want the child divs to fit the parent size, you should put a margin at least of the size of the child borders on the child divs ( child. margin >= child. bordersize ).
I had a similar problem, but in my case, I have content in my div that height-wise will exceed the boundaries of the parent div. When it does, I want it to auto-scroll. I was able to accomplish this by using
.vscrolling_container { height: 100%; overflow: auto; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
