chokk Posted January 18, 2011 Share Posted January 18, 2011 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! Link to comment Share on other sites More sharing options...
Ingolme Posted January 18, 2011 Share Posted January 18, 2011 The scrollbar may come as a result of any margin, padding or borders that you have placed on any element with 100% width or height. Link to comment Share on other sites More sharing options...
chokk Posted January 18, 2011 Author Share Posted January 18, 2011 Notice 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 More sharing options...
Ingolme Posted January 18, 2011 Share Posted January 18, 2011 Did you try setting the marging and padding of the html and body elements to zero?I'd have to actually see the page to know why something is working wrong. Link to comment Share on other sites More sharing options...
chokk Posted January 18, 2011 Author Share Posted January 18, 2011 Give me a few moments. I'll make it live and provide a link. Link to comment Share on other sites More sharing options...
chokk Posted January 18, 2011 Author Share Posted January 18, 2011 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;} Link to comment Share on other sites More sharing options...
thescientist Posted January 18, 2011 Share Posted January 18, 2011 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 More sharing options...
Ingolme Posted January 18, 2011 Share Posted January 18, 2011 By adding "margin: 0" to the body the problem gets solved. Link to comment Share on other sites More sharing options...
chokk Posted January 18, 2011 Author Share Posted January 18, 2011 The problem is, I want the black "border" to remain around the content. How could I achieve this? Link to comment Share on other sites More sharing options...
thescientist Posted January 18, 2011 Share Posted January 18, 2011 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%. Link to comment Share on other sites More sharing options...
Ingolme Posted January 18, 2011 Share Posted January 18, 2011 The problem is, I want the black "border" to remain around the content. How could I achieve this?Add the margin to your content instead. Link to comment Share on other sites More sharing options...
ShadowMage Posted January 18, 2011 Share Posted January 18, 2011 It'll be a great day when CSS3 box-sizing is finally implemented... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.