the issue with Michael's solution is that if you have a longer content than the displayed in the viewport and you have to scroll down to read it, the content color background (#ffff00) will be cropped to the size it had in the initial viewport
I would rather go for the jquery solution as deafninja (which also should have its caveats) On Oct 16, 1:07 pm, Kevin <[email protected]> wrote: > Wow, that worked perfectly! I had been looking for a solution for > weeks and was unable to find one on other forums and searching google. > > At first, I was having trouble getting it to work when I implemented > the css bits into my site, but as soon as I plugged in the doctype, > everything worked smoothly. > > I can finally get rid of the extra stylesheet I had to make just for > IE. > > Thank you! > Kevin > > On Oct 14, 9:12 am, Michael Kolaski <[email protected]> wrote: > > > Have tested this in IE and FF and it works. This is why I set the > > background colours > > > On 14/10/2010 17:06, Deafninja wrote: > > > > Sorry but when you specify height:100% it will only stretch the height of > > > the div 100% of the content. > > > > Best solution, is a jquery solution where grabs the height of the browser > > > port and then dynamically sets the height of the div for you on page load. > > > > Sent from my iTouch > > > > On Oct 14, 2010, at 10:22 AM, Kevin<[email protected]> wrote: > > > >> Either I implemented it wrong or you misunderstood the problem, but it > > >> doesn't work. :( > > > >> Still looking for a solution, if it's even possible. > > > >> On Oct 9, 10:25 am, Kevin<[email protected]> wrote: > > >>> Sorry I'm still somewhat confused. > > > >>> As soon as I add the star hack something such as > > > >>> #bottom { > > >>> top: 200px; > > >>> bottom: 0; > > >>> | > > > >>> should work fine? > > > >>> Thank you for the response. I will have to try this in a little bit > > >>> when I get the chance. > > > >>> On Oct 6, 5:55 am, Michael Kolaski<[email protected]> wrote: > > > >>>> Hi Kevin > > >>>> I've done this in the past - you need to use a container DIV and a > > >>>> 'star' > > >>>> hack to fix IE. The CSS is something like: > > >>>> html, body { > > >>>> height: 100%; > > >>>> } > > >>>> #container { > > >>>> min-height: 100%; > > >>>> } > > >>>> * html #container { > > >>>> height: 100%; > > >>>> } > > >>>> HTH > > >>>> Cheers, > > >>>> Mick > > >>>> -- > > >>>> Pinnacle Web > > >>>> Designhttp://www.pinnaclewebdesign.co.uk|http://twitter.com/pinnacleweb > > >>>> On 2 October 2010 16:20, Kevin<[email protected]> wrote: > > >>>>> #bottomhalf { > > >>>>> display: block; > > >>>>> position:absolute; > > >>>>> top:196px; > > >>>>> bottom: 0; > > >>>>> overflow:auto; > > >>>>> } > > >>>>> Fairly straight forward, I have a header at the top 196 pixels, and I > > >>>>> need #bottomhalf to fill up the rest of the page; this works fine in > > >>>>> Chrome, FF, but doesn't work in IE. > > >>>>> I've tried adding "height: 100%" to body as well as #bottomhalf and it > > >>>>> sort of works but because I plan to have scrollable content inside > > >>>>> this div, the actual div goes all the way down to 196 pixels > > >>>>> underneath the bottom of the window. > > >>>>> Only solution I can think of is creating a 100% height HTML table with > > >>>>> 2 rows; first one being 196px and the second one filling up the rest > > >>>>> of the space. > > >>>>> -- > > >>>>> -- > > >>>>> You received this because you are subscribed to the "Design the Web > > >>>>> with > > >>>>> CSS" at Google groups. > > >>>>> To post: [email protected] > > >>>>> To unsubscribe: [email protected] > > >> -- > > >> -- > > >> You received this because you are subscribed to the "Design the Web with > > >> CSS" at Google groups. > > >> To post: [email protected] > > >> To unsubscribe: [email protected] -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
