I have a forum for a client that is just killing me. My boss says that “…the background image needs to fill the entire screen height.” Well, its not the background image, its the background image for the two wrapper <div>s, and divs by default only have a height that is equal to the content they hold.
I have two wrapper <div>s for the forum theme so that it can be stretched to just about any feasible width and still maintain continuity.
Anyway, the structure is as follows:
<div id="wrapper">
<div id="inner_wrapper">
...code to make the forum goes here....
</div>
</div>
the CSS is as follows:
html, body {
height:100%
}
div#wrapper {
margin: 0 auto;
background:url(../images/theme/repeating_bk_drop_right.png) repeat-y right 0;
padding-right:20px;
height:100%;
}
div#inner_wrapper {
background:url(../images/theme/repeating_bk_drop_left.png) repeat-y left 0;
padding-left:20px;
height:100%;
}
I cannot for the life of me get the wrapper <div>s to fill the entire screen height. I can get them to fill the view port height, which works on the forums pages that do not require you to scroll the page. But if you have to scroll the page, then the drop shadow image simply stops at the bottom of the view port, and that is no good.
Sorry, but I’m struggling to see what the problem is - the code on the page doesn’t seem to match up to the code you’ve posted here, and I’m not seeing any repeated images cut off at the bottom of the viewport either…
Sorry I am working on it now, so it may not match. I’ll put it back as what I am doing now is not working either.
I think you misunderstand the issue. The repeating images belong in the #wrapper and #inner_wrapper divs. They repeat on the y-axis fine. The problem is that the #wrapper and #inner_wrapper divs will extend all the way to the end of the page as long as the page content exceeds the height of the viewport, by default. But of the page content does not exceed the height of the viewport, then the #wrapper and #inner_wrapper divs will not extend to the bottom of the veiwport as by default they only extend to the point that the content ceases to exist. The code above cause the opposite behavior. #wrapper and #inner_wrapper will extend to the height of the viewport only. This is fine for the pages whose content does not extend beyond the viewport, but for the pages whose content does, the #wrapper and #inner_wrapper divs just stop at the end of the initial viewport.
I need the #wrapper and #inner_wrapper divs to extend to the entire page or viewport, which ever is greater, without the footer being “glued” to the bottom. If your screen resolution is not large enough you will not notice this anyway, but my boss uses a ginormous screen, so he sees it every time.
One really hacky solution would be to put a huge load of padding-bottom in there somewhere, to extend the contents down as far as could possibly be needed to fill the biggest of screens, and then you can dump the height:100%. The downside is that this will mean that on most screens, you can scroll down way below the end of the content.
A better option, although not a proper CSS solution to the problem, might be to ‘cap’ the border - to actually finish it neatly and tidily below the footer, so that if it does finish on screen, it looks deliberate.
Yeah the problem with that is that it wouldn’t be consistent across the site. My boss designed it to look a certain way, and that’s the way he expects it to look.
I figure I can use some jQuery javascript magic to make it work, but I was hoping to avoid that. Unless you can come up with a better suggestions, I think I am going to have to go with the javascript, but I’ll sleep on it tonight and maybe in the AM come up with something.
Your going need to change the #wrapper to min-height:100% and completely remove height:100%
You only get one shot at min-height:100% so all bets are off on trying to get any children to inherit a min-height. That being the case you will need to use an absolute positioned div for the other shadow border. That is the same technique for AP faux columns, the empty div layers behind the actual content and just supplies BG colors/imgs.
I don’t really like the way both of those shadow images are 901px wide, they overlap when you get below that width and one of them distorts the shadow on the other. In this code below I set a min-width:920px to help it. I know what your up against though with those png shadows, you can’t set a BG color on the div because the same thing happens.
You could make the img on the wrapper a 20px wide img with the shadow only. Then make the faux div image an oversized width with the shadow on the right. That faux div I’m speaking of is the AP’d div in this demo code. I’ve got that div positioned as left:20px and the BG image positioned on the right so I think it would work if the image was 1500px wide or so.
Anyway, something like this is more than likely what you will need to do.
Hope that helps
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
html, body {
height:100%
}
body {
margin:0;
padding:0;
background: #252525 url(Themes/Ultimix20/images/body_bkgnd.png) no-repeat 0 0;
}
#wrap {
position: relative;/*containg block for AP #right-shdw*/
width: 90%;
min-width:920px;/*prevent BG images from overlapping shadows*/
min-height: 100%;
margin: 0 auto;
background: url(/theme/repeating_bk_drop_left.png) repeat-y 0 0;
}
#right-shdw { /*faux div for right shadow image, layers behind #inner*/
position: absolute;
top:0; bottom:0;
left:20px;
right:0;
min-width:900px;/*prevent BG images from overlapping shadows*/
background: url(Themes/Ultimix20/images/theme/repeating_bk_drop_right.png) repeat-y 100% 0;
}
#inner {
position: relative;
z-index: 1;/*layer above #right-shadow*/
color:#EEE;
overflow: hidden;/*un-collapse child margins (p-tags)*/
padding: 0 40px;
}
p {margin: 60px 0;}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
<p>code to make the forum goes here</p>
<p>code to make the forum goes here</p>
<p>code to make the forum goes here</p>
<p>code to make the forum goes here</p>
<p>code to make the forum goes here</p>
<p>code to make the forum goes here</p>
<p>code to make the forum goes here</p>
<p>code to make the forum goes here</p>
<p>code to make the forum goes here</p>
<p>code to make the forum goes here</p>
</div>
<div id="right-shdw"></div>
</div>
</body>
</html>
Can a moderator please remove the link to the server in the original post. I am not able to modify it. It is causing issues on our back end. Thank you.
