Jump to content

html, body


chokk
 Share

Recommended Posts

Hey all,In order to set a variable height on a div in the body element, I'm using percentages. For this to work, I have to assign height to both the body and html elements.That looks something like this:

html {	height: 100%;}body {	height: 100%;}#myDivElement {	height: 100%;	width: 100%;}

It works, however with this technique, I get a permanent scrollbar on the right side of my browser window, which is very unwanted. Is there a way to do this differently? I want my website to be 100% in width and 100% in height without any scrollbars.Note: The width property works without a hitch!

Edited by chokk
Link to comment
Share on other sites

5vw5xd.pngNotice that I haven't specified a height for the content div in the above example. The header and footer have collapsed and are of a fixed height in pixels. The width of those elements have been modified with margin and padding, yet there is no horizontal scrollbar.
Link to comment
Share on other sites

Linkstylesheet:
@charset "utf-8";/* CSS Document */#header {	width: 100%;	height: 27px;	background-color: #B6BB7E;	border: 1px solid #949A51;}#body {	width: 100%;	background-color: #C7CC9E;	border: 1px solid #C7CC9E;	color: #000000;  	font-family: Verdana, Arial, Helvetica, sans-serif;  	font-size: 10px;	background-image: url(../template/images/admin_background.png);	background-repeat: no-repeat;	background-position: center;}#footer {	width: 100%;	height: 27px;	background-color: #B6BB7E;	border: 1px solid #949A51;}#menu {	display: block;	float: left;	width: 13%;	margin: 1%;}#content {	display: block;	float: left;	width: 83%;	height: 500px;	background-image: url(../template/images/content_background.png);	margin: 1%;}html {	height: 100%;}body {	background-color: #000;	height: 100%;}ul {	list-style-type: none;	padding-left: 10px;	padding-right: 10px;	line-height: 15px;}a {	color:#000;}h3 {	padding-left: 10px;	padding-right: 10px;}form#login {  	background-color: #B6BB7E;  	color: #000000;  	font-family: Verdana, Arial, Helvetica, sans-serif;  	font-size: 10px;  	text-align: right; 	height: 27px;}#login .login {  	font-family: Verdana, Arial, Helvetica, sans-serif;  	font-size: 10px;  	background-color: #B3BA7D;  	color: #FFFFFF;  	margin-right: 6px;  }#login .logout {  	font-family: Verdana, Arial, Helvetica, sans-serif;  	font-size: 10px;  	background-color: #B3BA7D;  	color: #FFFFFF;  	margin-right: 6px;	margin-top: 5px;}#login .inputfields {	background-color: #C7CC9E;}

Edited by chokk
Link to comment
Share on other sites

hm.. well I know changing it a 95% height got rid of it. I can see a border on body selector in Firebug, but I'm not sure where it's coming from. Try using the universal selector to reset all elements to 0 margins and paddings and then reapply as necessary.

Link to comment
Share on other sites

then try my suggestion, of reducing the height of the element from 100%. The height will not include any borders, margins, and padding's, which in this case is effectively making the height more than 100%. To do so, you have to compensate the defined height of the element by compensating for the extra space the border adds. By trial and error I got 95%.

Edited by thescientist
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
 Share

×
×
  • Create New...