If the window size of the browser changes the line should still hit the end of the page and no vertical rollers should appear.
After spending a day I found a solution. Take a look at the vertical bar to the left:
![]() | ![]() |
HTML:
<div id="vertical"><div></div></div>
CSS:
body{
height: 100%;
}
div#vertical{
position: absolute;
top: 0px;
height: 100%;
width: 56px;
overflow: hidden;
}
div#vertical div{
background-image: url('/images/vertical_bg.gif');
background-repeat: repeat-y;
margin-top: 212px;
height: 100%;
}
Explanation.
Here I use two DIVs, one in another.
The first has a full-page height.
Inner DIV has a background image and shifted relatively to the parent one with a "margin-top" style parameter.
"overflow: hidden" parameter of the outer DIV cuts the outstanding edges of the inner DIV and the browser does not have a vertical scrolling.
This way it always fits the page heights and does not cover the header.
The outer DIV has an "absolute" positioning.
Of course, I should remember to reserve the space to the left for all elements on the page with a "margin-left" or a "left" CSS parameter.
No comments:
Post a Comment