Jump to content

Side Panel / Left Panel - Height 100% problem...


Recommended Posts

Hello W3S! Again...


I have probably asked of this before in time, but i forgot what you told me about this, so asking here again to see if i get any luck with me.


I have attached an image in this post to show what i am trying to do.


As you see on the side-panel, i wonna have the panel's height at "100%" so it WILL go from top to bottom!


My problem is that i HAVE to use position fixed to get it to be at 100%... this also means i will have problems with the content/wrapper when i get that far! Since the panel is at a fixed state, it will just be there.. now, my problem is that i wonna make the panel height full.. 100%... but without the panel div can overrule all other divs when i get that far in the project...


that is my first problem, the other is that i wish a max height on the panel, so that all browsers under 400px or so will be showed a scrollbar... is this possible in a fixed state div?


here is my CSS & HTML so far:

img {	margin: 0px;	padding: 0px;	border: none;}	img a {		margin: 0px;		padding: 0px;		border: none;	}		a img {		margin: 0px;		padding: 0px;		border: none;	}	* {	margin: 0px;	padding: 0px;	color: #FFFFFF;	font-size: 8pt;	font: "Trebuchet MS", Arial, Helvetica, sans-serif;	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}html, body {	width: 100%;	background-color: #1E1E1E;}#left_panel {	position: fixed;		color: #FFFFFF;	background: #111111 url('images/left_panel/background.png') repeat top left;		width: 220px;	min-width: 220px;	max-width: 220px;		height: 100%;		border: none;	border-right: 5px solid #4697d5;}
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml' xml:lang='da' lang='da'><head><title>Home</title><link rel='shortcut icon' href='http://localhost/other_projects/function_collection/templates/blue_1/favicon.ico' /><script type='text/javascript' src='http://localhost/other_projects/function_collection/templates/blue_1/js/jquery.js'></script><link rel='stylesheet' type='text/css' href='http://localhost/other_projects/function_collection/templates/blue_1/style.css' /></head><body><div id='left_panel'>Left Panel</div>Home</body></html>

If any questions, ask away.. i tried to be specific as possible.. if more details for the flaw are needed, ask... and i will try to re-explain it all again in another way if possible at all ^^'...


Hope some answers soon.. this one is a tricky one since i wonna have my menu on that panel Oo?...


thanks ^^

- rootKID

Hope answers soon ;)




Never mind.. i figured out the problem myself! I made a new div called main and put it around ALL of the stuff (meaning start right after <body> and close at end of <body>) made it a fixed position with 100% height and width and then just used relative inside the main div ^^... so far so good...


now i just need help with the scroll problem


The problem is like this now:


whenever my customers browser get below the 400-500px... then scrollbar does not appear, can someone tell me why Oo?


thanks again! :D


Edited by rootKID
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...