Background does not extend beyond viewport
While working on a client website got into this situation.
I have two backgrounds for a page; one on left side, another on the right side. Both repeat vertically. This is an example how I have set the code at first:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>2 columns, fixed width, right rail, content tallest</title>
<style type=”text/css”>
html, body {height:100%;margin:0;padding:0;}
body {background:url(left.gif) 0 0 repeat-y;color:#010101;font:12px/18px Arial,Verdana;}
#container {background:url(right.gif) 100% 0 repeat-y;width:100%;height:100%;}
</style>
</head>
<body>
<div id=”container”>
<div style=”height:950px;”>Bla Bla Bla…</div>
<!–To force a height so we can see a scrollbar for testing–>
</div>
</body>
</html>
Problem:
Everything works fine as long as we dont have a scrollbar on the right. When we have lot of content that makes the browser have a scrollbar, the background on the right does not seem to repeat; it ends at the end of the viewport.
Basics of Percentage Height:
Anytime you want to declare a percentage height of an element you must declare a dimension set for it’s parents as well(no necessarily by percentage). For example if you want to set 100% height for a div that is inside the body tag, you must set a dimension for the body as well as html tags as well.
<html>
<body>
<div class=”adiv”>bla bla bla…</div>
</body>
</html>
And the css for that:
html, body {height: 100%;}
.adiv {height:100%;}
Solution:
We like our div to be at least as high as the viewport, but if the content is longer than the viewport, stretch to contain it. CSS provides a way for us to do that with the min-height property. If we change the height: 100% in the #container rule to min-height: 100% everything is pronto. The code would look like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>2 columns, fixed width, right rail, content tallest</title>
<style type=”text/css”>
html, body {height:100%;margin:0;padding:0;}
body {background:url(left.gif) 0 0 repeat-y;color:#010101;font:12px/18px Arial,Verdana;}
#container {background:url(right.gif) 100% 0 repeat-y;width:100%;min-height:100%;}
</style>
</head>
<body>
<div id=”container”>
<div style=”height:950px;”>Bla Bla Bla…</div>
<!–To force a height so we can see a scrollbar for testing–>
</div>
</body>
</html>
(1 votes, average: 1.00 out of 5)
Loading ...
Leave your response!