Menu
I have a page structure similar to this:
<body> <div id="parent"> <div id="childRightCol"> /*Content*/ </div> <div id="childLeftCol"> /*Content*/ </div> </div> </body> I would like for the parent div to expand in height when the inner div's height increases.
Edit:
One problem is that if the width of the child content expands past the width of the browser window, my current CSS puts a horizontal scrollbar on the parent div. I would like the scrollbar to be at the page level. Currently my parent div is set to overflow: auto;
Can you please help me with the CSS for this?
893
You have margin-bottom set on both elements. With the child having a bottom margin, it will always be smaller by that amount. Removing the margin-bottom style might bring it a little closer.
container div has two parent elements: the <body> and the <html> element. And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
Try this for the parent, it worked for me.
overflow:auto; UPDATE:
One more solution that worked:
Parent:
display: table; Child:
display: table-row; Try to give max-contentfor parent's height.
.parent{ height: max-content; } https://jsfiddle.net/FreeS/so4L83wu/5/
21
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
