www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] yet another 100% height issue

  1. #1
    Join Date
    Aug 2007
    Location
    London
    Posts
    410

    resolved [RESOLVED] yet another 100% height issue

    Hi all,

    Having searched a bit on this problem but not been able to come up with a solution I decided to post here (yes I've validated my HTML and CSS already).

    I have a <div> (#site-body) whose height needs to be 100% of the document's height because it holds the main background image (there's a reason this isn't held by the <body>). When I set the following:

    Code:
    html {
    	height:100%;
    }
    
    body {
    	height:100%;
    }
    
    #site-body {
    	background:url(/site/library/images/background-wood-black-vertical.png) repeat 0 0;
    	height: 100%;
    }
    The document always has about 100px below the browser window (even though there is no content below about 500px). This space is completely white because nothing occupies it.
    I checked the dimensions of <html> and <body> in Firebug and both give height as 600px (which is correct since that's the size of the window) but the window scrolls to about 700px of blank space.

    This is really quite frustrating so if anyone knows what I'm doing wrong I'd appreciate the insight

  2. #2
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    Probably not the workaround you're looking for but you could set the div height dynamically by reading the viewport dimensions in JS.

    Code:
    document.getElementById('site-body').style.height = (self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight)) + "px";

  3. #3
    Join Date
    Aug 2007
    Location
    London
    Posts
    410
    Probably not the workaround you're looking for but you could set the div height dynamically by reading the viewport dimensions in JS.
    I appreciate the response but for me doing this in Javascript is dirty. I'd rather have a purely CSS approach if possible. I'll have to worry about JS enough once I finish realising the design mockup in XHTML and CSS.

    If there's something I'm doing wrong in the CSS or some way around this problem I'd appreciate knowing (anyone?)

  4. #4
    Join Date
    Jul 2009
    Posts
    35
    Im confused, I just tested that css and the image covers 100&#37; of the browser window. Also can you please be more specific if whatever youre mentioning actually happens in all top 5 browsers?

  5. #5
    Join Date
    Aug 2007
    Location
    London
    Posts
    410
    Im confused, I just tested that css and the image covers 100% of the browser window. Also can you please be more specific if whatever youre mentioning actually happens in all top 5 browsers?
    I just tried again in Safari, Chrome, Opera and Firefox and all have the same about of white space if you scroll down no matter of the window size. There's always the same amount of white space at the bottom. Screen shots are attached. Maybe the page structure would help?

    Here it is:

    HTML Code:
    <body> 
    	<div id="top-menu"> 
    		<div id="menu-name-plate"></div> 
    		<div id="menu-items"> 
    			<a id='menu-envision' href='/envision/' class='main-menu-item' ></a><a id='menu-develop' href='/develop/' class='main-menu-item' ></a><a id='menu-inform' href='/inform/' class='main-menu-item' ></a><a id='menu-contact' href='/contact/' class='main-menu-item' ></a>		</div> 
    	</div> 
    	<div id="site-body"> 
    		<div id="hidden-drawer"> 
    					</div> 
    		<div id="side-label"> 
    			<img src='/site/library/images/envision-sidelabel.png' alt='Envision' />		</div> 
    		<div id="main-content"> 
    	<p ><em>Unable to locate page.</em> A fatal error has occurred. I'm sorry for any inconvenience this may have caused you but it has been reported and logged. If you wish, you can contact the administration at <a href='mailto:me@gideonfarrell.co.uk' >me@gideonfarrell.co.uk</a></p>		</div> 
    	</div> 
    	</body>
    and the CSS for reference:

    Code:
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin : 0;
    padding : 0;
    border : 0;
    outline : 0;
    font-size : 100%;
    vertical-align : baseline;
    background : transparent;
    }
    body {
    line-height : 1;
    }
    ol, ul {
    list-style : none;
    }
    blockquote, q {
    quotes : none;
    }
    blockquote:before, blockquote:after, q:before, q:after {
    content : '';
    content : none;
    }
    :focus {
    outline : 0;
    }
    ins {
    text-decoration : none;
    }
    del {
    text-decoration : line-through;
    }
    table {
    border-collapse : collapse;
    border-spacing : 0;
    }
    * {
    font-size : 10pt;
    font-family : Helvetica, Arial, Verdana, sans-serif;
    color : #bfb6ac;
    }
    html {
    height : 100%;
    }
    body {
    height : 100%;
    }
    #site-body {
    background : url(/site/library/images/background-wood-black-vertical.png) repeat 0 0;
    height : 100%;
    }
    #top-menu {
    background : url(/site/library/images/top-menu-background.png) repeat-x 0 0;
    position : absolute;
    width : 100%;
    height : 200px;
    top : 0;
    left : 0;
    }
    #menu-name-plate {
    background : url(/site/library/images/top-menu-nameplate.png) no-repeat 0 0;
    width : 260px;
    height : 100px;
    margin-top : 24px;
    margin-left : 25px;
    }
    #hidden-drawer {
    height : 150px;
    margin-left : 160px;
    }
    #side-label {
    height : 100%;
    width : 160px;
    float : left;
    min-height : 465px;
    margin-top : -65px;
    }
    #main-content {
    padding-top : 50px;
    }
    .darktype {
    color : #1a1917;
    }
    .medtype {
    color : #403d38;
    }
    Thanks for checking this out.
    Attached Images Attached Images

  6. #6
    Join Date
    Jul 2009
    Posts
    35
    ok way better now, your problem is here:

    #side-label {
    height : 100&#37;; // REMOVE
    width : 160px;
    float : left;
    min-height : 465px;
    margin-top : -65px;
    }

    Edit: I blamed the wrong element.

    Apparently there's a small gap on top of your side-lable div margin and this small gap plus the negative margin is being added to the bottom of the page since they're both taking up space from the parent container height in which youre trying to expand the height of your sidebar to 100%. Im also assuming that your hidden-drawer div is somehow triggering this effect since its sharing place on the same container youre trying to occupy the full height.
    Last edited by charlitos; 11-17-2009 at 02:21 PM.

  7. #7
    Join Date
    Aug 2007
    Location
    London
    Posts
    410
    Ahh! Thank you!
    I didn't think to look at that but now that you've said it it's a bit obvious. Gah!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles