Re: [css-d] How to make a div fill the height of an iframe
Thanks Markus for your reply! See below my comments... CheersLuis > Date: Fri, 30 Mar 2012 09:30:28 +0200 > From: derer...@gmx.ch > To: nmqp...@hotmail.com > CC: css-d@lists.css-discuss.org > Subject: Re: [css-d] How to make a div fill the height of an iframe > > I am afraid this can't be done with CSS - somebody correct me if I am > wrong. Unlike width, adjusting height is quite a hassle in CSS. I assume > that your options are about the following: > > 1. Waive the fixed 1st div and make the whole iframed document scrollable. Not an option. The top div is the search criteria, and the bottom div hold the results. The requirement is to be able to scroll the results while keeping the search criteria always visible. > 2. Fix the height of the 1st div, so you know the height of the 2nd one. That can be done, however every time the top div changes (e.g. adding a new search field) the height needs to be manually recalculated and the corresponding CSS manually changed. Not a big deal but I just wanted to automate it as much as possible. > 3. Is it necessary to use an iframe? (It might be useful to provide a > link to your actual case for such questions.) If not, it might be easier > to go without, then you can just give the 2nd div a fixed height. My description was a bit simplistic. In fact, the iframe displays a complete page, not only the two divs that I mentioned. So yes, an iframe is necessary. > 4. Use jQuery to calculate the heights of the divs. You might get help > on that way in a Javascript or jQuery forum. I am quite comfortable with jQuery and I agree it could be done that way. I hoped to find a pure CSS solution for this but apparently the JS path is the way to go... > HTH > Markus __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to make a div fill the height of an iframe
Am 30.03.2012 05:50 schrieb Luis Cabral: I am re-posting my question below, I hope it displays properly this time. Hello, I have the following scenario: - An iframe that has fixed width and height and is absolutely positioned in the middle of the screen (simulating a modal pop up window) - The document inside that iframe contains 2 divs, both 100% width. The top one is variable height, and the bottom one should occupy the space left inside the iframe. If required, scrollbars should display in the bottom div, but not in the iframe itself. I made a diagram to try to make it clearer: +-iframe (fixed width and height) | no scrollbars should display on the iframe |+-div1 ||variable height || || || || |+- |+-div2 ||height should occupy the ||remaining space in the div, scrollbars should show ||inside the div if required if its contents ||are bigger than the available space |+-- +-- Note that this slightly different from the usual requirement, which is to dynamically resize the iframe accordingly to its contents. Is this possible to be done with just CSS? (assume the most recent browsers will be used i.e. Chrome, IE8+ etc) I am afraid this can't be done with CSS - somebody correct me if I am wrong. Unlike width, adjusting height is quite a hassle in CSS. I assume that your options are about the following: 1. Waive the fixed 1st div and make the whole iframed document scrollable. 2. Fix the height of the 1st div, so you know the height of the 2nd one. 3. Is it necessary to use an iframe? (It might be useful to provide a link to your actual case for such questions.) If not, it might be easier to go without, then you can just give the 2nd div a fixed height. 4. Use jQuery to calculate the heights of the divs. You might get help on that way in a Javascript or jQuery forum. HTH Markus __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to make a div fill the height of an iframe
> Date: Fri, 23 Mar 2012 16:29:06 -0400 > From: "Robert A. Rosenberg" > To: Luis Cabral > Cc: css-d@lists.css-discuss.org > Subject: Re: [css-d] How to make a div fill the height of an iframe > Message-ID: > Content-Type: text/plain; charset="iso-8859-1" ; format="flowed" > > At 08:32 +0000 on 03/23/2012, Luis Cabral wrote about [css-d] How to > make a div fill the height of an iframe: > > If you make the 2nd DIV a table would that work (ie: Show the scroll > bars as needed but not affect the height of the iframe or add scroll > bars to it)? Thanks for the reply. I tried using a table instead of a div, but no luck. By the way, sorry for my original post that looks all messed up! I think it was caused by the webmail client I use... I am re-posting my question below, I hope it displays properly this time. Hello, I have the following scenario: - An iframe that has fixed width and height and is absolutely positioned in the middle of the screen (simulating a modal pop up window) - The document inside that iframe contains 2 divs, both 100% width. The top one is variable height, and the bottom one should occupy the space left inside the iframe. If required, scrollbars should display in the bottom div, but not in the iframe itself. I made a diagram to try to make it clearer: +-iframe (fixed width and height) | no scrollbars should display on the iframe |+-div1 ||variable height || || || || |+- |+-div2 ||height should occupy the ||remaining space in the div, scrollbars should show ||inside the div if required if its contents ||are bigger than the available space |+-- +-- Note that this slightly different from the usual requirement, which is to dynamically resize the iframe accordingly to its contents. Is this possible to be done with just CSS? (assume the most recent browsers will be used i.e. Chrome, IE8+ etc) Thanks Luis __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to make a div fill the height of an iframe
At 08:32 + on 03/23/2012, Luis Cabral wrote about [css-d] How to make a div fill the height of an iframe: Hello, I have the following scenario: - An iframe that has fixed width and height and is absolutely positioned in the middle of the screen (simulating a modal pop up window)- The document inside that iframe contains 2 divs, both 100% width. The top one is variable height, and the bottom one should occupy the space left inside the iframe. If required, scrollbars should display in the bottom div, but not in the iframe itself. I made a diagram to try to make it clearer: +-iframe (fixed width and height)|+-div1||variable height|+---|+-div2||height should occupy the ||remaining space in the div, scrollbars show ||inside the div if required if its contents ||are bigger than the available space|+--+-- Note that this slightly different from the usual requirement, which is to dynamically resize the iframe accordingly to its contents. Is this possible to be done with just CSS? (assume the most recent browsers will be used i.e. Chrome, IE8+ etc) ThanksLuis __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ If you make the 2nd DIV a table would that work (ie: Show the scroll bars as needed but not affect the height of the iframe or add scroll bars to it)? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] How to make a div fill the height of an iframe
Hello, I have the following scenario: - An iframe that has fixed width and height and is absolutely positioned in the middle of the screen (simulating a modal pop up window)- The document inside that iframe contains 2 divs, both 100% width. The top one is variable height, and the bottom one should occupy the space left inside the iframe. If required, scrollbars should display in the bottom div, but not in the iframe itself. I made a diagram to try to make it clearer: +-iframe (fixed width and height)|+-div1||variable height|+---|+-div2||height should occupy the ||remaining space in the div, scrollbars show ||inside the div if required if its contents ||are bigger than the available space|+--+-- Note that this slightly different from the usual requirement, which is to dynamically resize the iframe accordingly to its contents. Is this possible to be done with just CSS? (assume the most recent browsers will be used i.e. Chrome, IE8+ etc) ThanksLuis __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
