Html more info expand full#

Big whoop.Īlthough the interaction is simple, it's an interaction that does not have a consistent native implementation across browsers - despite movement to standardize it. All they do is let you toggle the visibility of content by clicking that content's label. The problem with the fiddle is the yellow and black divs don't expand to fit the new content when the add new content button is pushed.Inclusive Components book is now available, withĬollapsible sections are perhaps the most rudimentary of interactive design patterns on the web. Then, when enough content is added to one of the divs to make it larger than the browser, both divs expand to fit the available content.

Html more info expand full#

I'd like the ability to make two side by side divs start out the full height of the browser window even when there is no content in them. Truncated version, for those who are in a rush. I would really appreciate any help I can get and I thank you for your time. Additionally, answers such as this one suggest combinations of min-height and height to achieve one effect or the other, but not the both I am looking for. Basically, when I try other people's solutions, it appears that I can either have divs that start out small (less than full screen) and grow correctly or start out correctly (full screen, even though initial content is smaller) and don't grow but not both (I would like divs that start out correctly and grow to fit content). Such answers like this one and this one recommend using the min-height property on some elements but when I tried it, the black and yellow divs started small (size of the content, not the full browser height) but did expand correctly. I've researched this problem to the best of my ability on stackoverflow and elsewhere and no presented solutions appear to work for this type of dynamic content (although I may be, and problably am, missing something). Instead, what happens (as you can see) is neither the black nor the yellow divs expand when the content is added and the content simply flows outside of the bounds of the yellow div. The desired effect is for both the yellow and black divs to expand such that the yellow div is as big as it needs to be to hold the content and the black div is the same height as the yellow div. When the 'click me to add content' button is clicked, 100 lines of content are appended to the content div which then makes it longer than the window. The black div represents the menu and the yellow div represents the one that holds the content. Additionally, I set all the CSS heights to 100% solely because of reading another answer, not because I know they are required to make this work (I do want the menu to start out full screen even with minimal content, however). The HTML structure of the fiddle is mostly fixed (containers can be added but should not be removed) as this is a tremendous simplification of a complex application that has that same basic structure. When the program starts, the rightmost div is less than the height of the browser window (because it does not have much content) but as the application progresses, content gets added to it such that it eventually is much longer than the browser window.Ī JSFiddle that shows the problem can be found by clicking here. The rightmost div is the one that content gets appended to dynamically. The leftmost div is a menu that must always be the height of the document's content or the browser window (whichever is greater). There are two side by side divs on a page. The problem I'm running into is as follows: I've been going crazy over the last few hours trying to solve the problem I'm currently stuck on.

I'm writing a web app, predominantly in AngularJS using CSS's flexbox for some of the layout, if that matters.