Search the Community
Showing results for tags 'fill a page'.
Found 1 result
-
Hi all! I'm not entirely certain I've got this post in the right forum, since I suspect the solution will be javascript rather than css, but the problem is with the css so I figured I'd start here. I've done extensive Googling for this problem and still come up blank, so any help anyone can give would be much appreciated! I have a div empty of everything except a repeated background image that I would like stretching from almost the top of the page (90px down) right to the very bottom. Obviously, making the height:100%; only stretches to the bottom of the browser window. If the content makes the page scroll, the div doesn't go any further down. I'm hoping for a css solution to this, but after searching and finding that's probably not possible, I'm willing to go with a javascript or jQuery solution, or php if that would help? I'm brand new to these languages so please be gentle! The html: <!DOCTYPE html><html><head> <link href="main.css" rel="stylesheet" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script></head><body><header id="top-trim"></header><header id="main-header"></header></body></html> The css (that matters): body{ font-family: conquerorsans, Tahoma, verdana, sans-serif; font-size: 18pt; color: #9e8166; letter-spacing:2px; background-color: #e6e0d5; background-image:url(images/layout/whitepaper.jpg); background-position:0px 0px; background-repeat:repeat;}#top-trim{ position:absolute; left:90px; top:0px; height:20px; width:550px; background-image:url(images/layout/brownpaper.jpg);}#main-header{ position:absolute; left:90px; top:90px; bottom:0px; margin-bottom:0px; width:550px; min-height:100%; display:table-cell; background-image:url(images/layout/brownpaper.jpg);} And the full page is here. The cheating column idea (using a background image with the column in it) won't work for this unfortunately, since the page is planned to be side-scrolling and would therefore require a background image several thousand pixels long to stop the column from repeating and that would be hellishly load-time-heavy. I'd also prefer not to just specify that the div be 10000px high and scroll the thing on forever, because that's just untidy and lazy.
