darryncooke
Technical User
You will see the bar on the left extends beyond the page. how do i prevent that so that the bar always just extends to the bottom of the page?
thank you,
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
CSS height issue 1
- Thread starter darryncooke
- Start date
- Status
You will see the bar on the left extends beyond the page. how do i prevent that so that the bar always just extends to the bottom of the page?
thank you,
-
1
- #2
You define the bar to be 100% in height. Since the bar has no parent element (that is positioned), it will be 100% of the viewport, or browser window. However, then you reposition the bar 130px down from the top. This will cause the bar to extend 130px beyond the 100%.
If you do not care about IE6 (don't know if this has been fixed in IE7 or not), you could simply remove the height from the bar and add [tt]bottom: 0;[/tt]. This would define the bar to begin at 130px from top and end 0px from bottom. And that's what you want.
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
If you do not care about IE6 (don't know if this has been fixed in IE7 or not), you could simply remove the height from the bar and add [tt]bottom: 0;[/tt]. This would define the bar to begin at 130px from top and end 0px from bottom. And that's what you want.
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
- Thread starter
- #3
darryncooke
Technical User
that worked -- now if i make the browser window smaller the horizontal scroll bar doesnt cover the whole bottom and the menu scrolls but everything else stays?
does this have to do with the fixed positioning of the 2 elements? how can i prevent this?
does this have to do with the fixed positioning of the 2 elements? how can i prevent this?
You seem to be switching the page around as we speak. Can you express exactly what you would like to achieve? I don't understand what you mean when you say that menu scrolls and everything else stays.
As I see it now, your page adjusts the "background" to the window size, while all other elements on the page are static (i.e. positioned where they are on the page and do not move with changing the size of the page.
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
As I see it now, your page adjusts the "background" to the window size, while all other elements on the page are static (i.e. positioned where they are on the page and do not move with changing the size of the page.
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
- Thread starter
- #5
darryncooke
Technical User
right, but what happens if you make the browser width smaller than the largest div is that you get a horizontal scroll bar (which i am fine with) except that it doesnt start at the left corner of the browser.
This is the part thats hard to explain but the horizontal scrollbar that appears almost actls like a frame. it doesnt scroll the whole page (i do not want the BG to scroll) but just the 2 divs (#menu and #pagecontent).
I want the scrollbar to act like a normal scroll bar and scroll all the content, except of course the bg which is fine as is.
I hope that clears it up.
and on another note how can i get the 3 icons i have on the left to stay at the bottom of that div it is in (with about 20px padding)? this isnt a huge deal but the scrolling is kinda annoying.
thank you for your help, and are there any easy to understand books on css that you can recommend? I am usually a fan of the Dummy series and if you know that their css book is good please let me know.
This is the part thats hard to explain but the horizontal scrollbar that appears almost actls like a frame. it doesnt scroll the whole page (i do not want the BG to scroll) but just the 2 divs (#menu and #pagecontent).
I want the scrollbar to act like a normal scroll bar and scroll all the content, except of course the bg which is fine as is.
I hope that clears it up.
and on another note how can i get the 3 icons i have on the left to stay at the bottom of that div it is in (with about 20px padding)? this isnt a huge deal but the scrolling is kinda annoying.
thank you for your help, and are there any easy to understand books on css that you can recommend? I am usually a fan of the Dummy series and if you know that their css book is good please let me know.
- Status