• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 322
  • Last Modified:

fluid height cross browser

@ ts.imagewize.com I am working on making the height fluid so content will always fit. This should work in all browsers (Firefox 3.6+, Safari4+, Chrome and IE6+). So far I have ahd no luck. I need the background image and rounded corners to stay, but find a way to get the height to auto adjust cross browser using HTML/CSS. Why is the height currently not auto resizing?
0
rhandalthor
Asked:
rhandalthor
  • 8
  • 3
3 Solutions
 
ludofulopCommented:
set background color of your content area to blue, also set a non-repeating backgound, as it has now.
cut the bottom 15 pixels of your backgound, and put it to the bottom of the page (as a regular image).
you should get something like this:

<div style="background: url('yourbackground.jpg') blue no-repeat;">
... text ...
<br /><img src="roundedbottomline.jpg" /><br />
</div>
0
 
rhandalthorAuthor Commented:
I tried your suggestion at ts.imagewize.com - reversed now - but had not success. What exact element should get background #286E8D? Why would making the image smaller make the footer go neatly underneath the main content with max-height 800px and height 100%?
0
 
rhandalthorAuthor Commented:
Added html, body:height100% as discussed @ http://callmejack.wordpress.com/2006/10/14/100-height-with-css/ and changes are visible, but footer gets kicked out somehow..
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
rhandalthorAuthor Commented:
Made some more changes. main content has an odd indent to the right just before footer, but footer is well positioned again. Height still does not auto-adjust though as you can see on ts.imagewize.com ' s home page..
0
 
rhandalthorAuthor Commented:
Fixed indent. Now still working on auto-height..
0
 
rhandalthorAuthor Commented:
Any ideas based on current changes?
0
 
ludofulopCommented:
i'm getting the same results both in ie and ff, with no problem...
what is your question ? you want the page always fit the height of browser window, making the text scrollable ?
0
 
rhandalthorAuthor Commented:
1/In Safari http://www.ts.imagewize.com/index.html has text leaving div and covering footer. The same goes for Firefox. This is when viewport's height is smaller than 800-805
2/ About keeps the same height as home even thought there is way less text.
0
 
ludofulopCommented:
remove the height: 100% from each elemtent, and add a <div style="clear:both"><!-- --></div> just after div with id main-right
0
 
rhandalthorAuthor Commented:
I could hug you right now. Thanks! Wonder how I could not think of this. Also wonder why that height:100% trick that not work... Well come to think of it it worked to well. But it did not precent the footer from biting the content in the b*tt. Hope I will be able to implement this solution swiftly the next time..
0
 
rhandalthorAuthor Commented:
Can my comment be removed from credited ones again? Thanks!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 8
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now