Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with 100% height Divs

    Hi all,

    First post here, and hopefully it'll be my last for asking questions, and it'll be more of answering!

    The problem I have is easier to explain if I show you. The page is uploaded at http://www.hamcall.co.uk/mir/website/index.html

    Basically, I don't know why the left bar isn't extending down to the bottom of the page when the content in the main_content block exceeds 100% of the browsers inital viewport.

    If anyone has any ideas for fixes and maybe an explanation as to where I went wrong it would be greatly appreciated.

    (If you need the code you can just view source of that page, or i'll post it on here if you need it here instead)


    index.html XHTML document

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <!-- Div Container starts -->
    <div class="container">
    
    	<!-- Main Content dividing block starts -->
    	<div class="main_content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur et mi. Maecenas elementum tristique felis. Morbi at massa. Donec posuere. Donec magna. Ut neque nibh, tristique nec, ultrices non, scelerisque non, sapien. Suspendisse ornare vulputate massa. Vestibulum pede lectus, facilisis ut, commodo non, vestibulum eget, dolor. Donec mollis ipsum sed magna. Nullam nonummy imperdiet urna. Morbi eget libero at dolor dapibus vestibulum. Duis tincidunt ullamcorper sem. Integer a lectus. Integer sit amet turpis. 
    
    Cras vulputate. Etiam at erat. Nam ante. Nulla sit amet tellus. Nunc tincidunt. Aenean leo sem, facilisis ut, rhoncus vel, accumsan elementum, lorem. Suspendisse vel dolor non mi euismod scelerisque. Cras vel diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tempus, nibh sed congue varius, nibh lacus volutpat nisl, viverra tincidunt dui orci sed lacus. 
    
    Sed nisi erat, laoreet at, sagittis ac, cursus at, nisi. Fusce nonummy consectetuer tortor. Morbi ullamcorper neque laoreet orci. Quisque euismod, magna et luctus imperdiet, lectus massa blandit pede, sit amet pellentesque libero dui ac risus. Vivamus sodales viverra sem. Vestibulum purus risus, hendrerit eu, porttitor non, bibendum at, orci. Ut convallis ipsum mollis ante. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Proin in nibh. Nunc libero. 
    
    Maecenas sagittis. Donec est. Integer vehicula eros a elit. Curabitur lobortis tincidunt tellus. Nunc scelerisque erat ac nunc. Morbi mollis lacinia purus. Nullam volutpat velit vitae metus. Donec blandit nisi id elit semper dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce felis lacus, hendrerit at, malesuada eget, tincidunt a, ipsum. Curabitur massa nunc, lacinia at, ullamcorper malesuada, ullamcorper in, mi. Ut ac mauris. Ut vulputate. Nullam suscipit libero. 
    
    Nunc dapibus massa sed arcu. Nulla consectetuer luctus diam. Donec egestas. Vivamus a mauris. Cras ut lectus ac mauris dignissim ultrices. Suspendisse potenti. Suspendisse ac arcu. Aliquam erat volutpat. Donec ornare nisi id lacus. Cras vestibulum, libero eget bibendum tristique, sem sapien iaculis diam, bibendum scelerisque felis velit ac lacus. Mauris sed arcu id neque blandit venenatis. Fusce vel libero. Duis urna mauris, consectetuer non, mollis et, eleifend sollicitudin, ligula. Nam dignissim, lacus vel venenatis viverra, tellus sem mollis ligula, in pretium nisl mi et nunc. Suspendisse odio eros, malesuada vel, mollis ac, lobortis quis, eros. Quisque mi nibh, facilisis sed, porttitor vel, rhoncus in, tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse elit enim, pulvinar et, convallis at, ultrices ac, lectus. 
    
    Nunc non lacus. Sed diam urna, ornare sit amet, suscipit in, tristique ut, enim. Maecenas vulputate justo et velit aliquam lobortis. Aliquam mauris. Nullam accumsan, purus quis scelerisque pretium, dolor eros accumsan purus, a interdum elit dui adipiscing urna. Cras est elit, feugiat vel, suscipit eu, elementum ut, tellus. Pellentesque accumsan diam eu nisl. Vivamus fringilla semper nisi. Sed eleifend elit vitae est. Aliquam rutrum lobortis ligula. Praesent non eros quis enim rhoncus elementum. Curabitur mollis est eu nisi. 
    
    Nulla rhoncus. Morbi sed lectus. Nam sem turpis, congue a, dignissim at, sollicitudin porta, justo. Curabitur blandit tincidunt leo. Nam interdum. Proin rutrum consectetuer mauris. Donec eu turpis non sapien volutpat sagittis. Morbi dignissim lorem at ligula. Ut pharetra, purus in posuere porttitor, velit lorem auctor felis, ut dapibus est velit volutpat erat. Sed semper tellus id orci. Fusce hendrerit diam sit amet mi. Nulla facilisi. Donec eleifend elementum dolor. Aliquam pede. Donec rhoncus neque sed leo. Quisque fringilla viverra ipsum. Cras sit amet orci interdum nulla egestas imperdiet. Cras sit amet pede. Aliquam erat volutpat. Nunc venenatis. 
    
    Nulla mollis, mauris a suscipit cursus, enim magna tincidunt velit, in pharetra nulla elit mollis nisl. Integer pretium. Mauris vel libero ut lacus commodo interdum. Morbi hendrerit, lectus ac varius vulputate, ante nulla pellentesque purus, at vehicula nisl libero faucibus nibh. Vestibulum sollicitudin, turpis vitae egestas auctor, neque velit egestas quam, id ullamcorper nunc massa ac est. Sed augue dolor, laoreet at, mollis nec, hendrerit accumsan, ante. Cras tellus elit, ornare nec, adipiscing dapibus, cursus ac, sapien. Fusce lorem risus, vehicula id, suscipit at, mattis vel, tortor. Donec ligula eros, ornare a, convallis nec, ornare sit amet, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
    
    	<!-- Main Content dividing block ends -->
    	</div>
    	
    	<div class="navbar_left_top">
    	</div>
    
    	<div class="navbar_top_extending">
    	</div>
    
    	<div class="navbar_left_extending">
    	</div>
    	
    <!-- Div Container ends -->
    </div>
    
    </body>
    </html>


    style.css CSS document

    Code:
    html, body {
    	height: 100%;
    	width: 100%;
    	margin: 0px;
    	padding: 0px;
    }
    
    html>body .container {
    	height: auto;
    }
    
    /* Full-page container block */
    
    div.container {
    	margin: 0px;
    	height: 100%;
    	min-height: 100%;
    	padding: 0px;
    }
    
    /* Navigation Bar Styles */
    
    .navbar_top_extending {
    	background-image: url(../img/nav-top.jpg);
    	background-repeat: repeat-x;
    	left: 0px;
    	position: absolute;
    	top: 0px;
    	height: 142px;
    	right: 0px;
    	width: 100%;
    }
    
    .navbar_left_top {
    	background-image: url(../img/nav-topleft.jpg);
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	height: 142px;
    	width: 145px;
    	z-index: 1;
    }
    .navbar_left_extending {
    	background-image:url(../img/nav-left.jpg);
    	background-repeat: repeat-y;
    	left: 0px;
    	position: absolute;
    	top: 0px;
    	width: 145px;
    	height: 100%;
    }
    
    .main_content {
    	position: absolute;
    	height: auto;
    	left: 150px;
    	right: 10px;
    	top: 147px;
    }

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You won't be able to with all of that absolute positioning.

    I would suggest you remake the page, floating elements as neccesary to achieve the desired look.

    Edit: Here, something like this:

    Code:
    html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    }
    
    body {
    background: url(http://www.hamcall.co.uk/mir/website/img/nav-left.jpg) repeat-y;
    }
    
    #container {
    margin: 0;
    padding: 0;
    clear: both;
    }
    
    #header {
    background: url(http://www.hamcall.co.uk/mir/website/img/nav-top.jpg) repeat-x;
    height: 142px;
    width: 100%;
    }
    
    #header #navbar_left_top {
    background: url(http://www.hamcall.co.uk/mir/website/img/nav-topleft.jpg);
    height: 142px;
    width: 145px;
    float: left;
    }
    
    #main_content {
    margin-left: 150px;
    }
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Document</title>
    
    <link href="index_files/style.css" rel="stylesheet" type="text/css"></head>
    
    <body>
    <div id="header"><div id="navbar_left_top"></div></div>
    
    <div id="container">
    
    <div id="navbar_left_extending"></div>
    
    <div id="main_content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur et
    mi. Maecenas elementum tristique felis. Morbi at massa. Donec posuere.
    Donec magna. Ut neque nibh, tristique nec, ultrices non, scelerisque
    non, sapien. Suspendisse ornare vulputate massa. Vestibulum pede
    lectus, facilisis ut, commodo non, vestibulum eget, dolor. Donec mollis
    ipsum sed magna. Nullam nonummy imperdiet urna. Morbi eget libero at
    dolor dapibus vestibulum. Duis tincidunt ullamcorper sem. Integer a
    lectus. Integer sit amet turpis. Cras vulputate. Etiam at erat. Nam
    ante. Nulla sit amet tellus. Nunc tincidunt. Aenean leo sem, facilisis
    ut, rhoncus vel, accumsan elementum, lorem. Suspendisse vel dolor non
    mi euismod scelerisque. Cras vel diam. Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Nulla tempus, nibh sed congue varius,
    nibh lacus volutpat nisl, viverra tincidunt dui orci sed lacus. Sed
    nisi erat, laoreet at, sagittis ac, cursus at, nisi. Fusce nonummy
    consectetuer tortor. Morbi ullamcorper neque laoreet orci. Quisque
    euismod, magna et luctus imperdiet, lectus massa blandit pede, sit amet
    pellentesque libero dui ac risus. Vivamus sodales viverra sem.
    Vestibulum purus risus, hendrerit eu, porttitor non, bibendum at, orci.
    Ut convallis ipsum mollis ante. In hac habitasse platea dictumst. In
    hac habitasse platea dictumst. Proin in nibh. Nunc libero. Maecenas
    sagittis. Donec est. Integer vehicula eros a elit. Curabitur lobortis
    tincidunt tellus. Nunc scelerisque erat ac nunc. Morbi mollis lacinia
    purus. Nullam volutpat velit vitae metus. Donec blandit nisi id elit
    semper dictum. Vestibulum ante ipsum primis in faucibus orci luctus et
    ultrices posuere cubilia Curae; Fusce felis lacus, hendrerit at,
    malesuada eget, tincidunt a, ipsum. Curabitur massa nunc, lacinia at,
    ullamcorper malesuada, ullamcorper in, mi. Ut ac mauris. Ut vulputate.
    Nullam suscipit libero. Nunc dapibus massa sed arcu. Nulla consectetuer
    luctus diam. Donec egestas. Vivamus a mauris. Cras ut lectus ac mauris
    dignissim ultrices. Suspendisse potenti. Suspendisse ac arcu. Aliquam
    erat volutpat. Donec ornare nisi id lacus. Cras vestibulum, libero eget
    bibendum tristique, sem sapien iaculis diam, bibendum scelerisque felis
    velit ac lacus. Mauris sed arcu id neque blandit venenatis. Fusce vel
    libero. Duis urna mauris, consectetuer non, mollis et, eleifend
    sollicitudin, ligula. Nam dignissim, lacus vel venenatis viverra,
    tellus sem mollis ligula, in pretium nisl mi et nunc. Suspendisse odio
    eros, malesuada vel, mollis ac, lobortis quis, eros. Quisque mi nibh,
    facilisis sed, porttitor vel, rhoncus in, tortor. Class aptent taciti
    sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
    Suspendisse elit enim, pulvinar et, convallis at, ultrices ac, lectus.
    Nunc non lacus. Sed diam urna, ornare sit amet, suscipit in, tristique
    ut, enim. Maecenas vulputate justo et velit aliquam lobortis. Aliquam
    mauris. Nullam accumsan, purus quis scelerisque pretium, dolor eros
    accumsan purus, a interdum elit dui adipiscing urna. Cras est elit,
    feugiat vel, suscipit eu, elementum ut, tellus. Pellentesque accumsan
    diam eu nisl. Vivamus fringilla semper nisi. Sed eleifend elit vitae
    est. Aliquam rutrum lobortis ligula. Praesent non eros quis enim
    rhoncus elementum. Curabitur mollis est eu nisi. Nulla rhoncus. Morbi
    sed lectus. Nam sem turpis, congue a, dignissim at, sollicitudin porta,
    justo. Curabitur blandit tincidunt leo. Nam interdum. Proin rutrum
    consectetuer mauris. Donec eu turpis non sapien volutpat sagittis.
    Morbi dignissim lorem at ligula. Ut pharetra, purus in posuere
    porttitor, velit lorem auctor felis, ut dapibus est velit volutpat
    erat. Sed semper tellus id orci. Fusce hendrerit diam sit amet mi.
    Nulla facilisi. Donec eleifend elementum dolor. Aliquam pede. Donec
    rhoncus neque sed leo. Quisque fringilla viverra ipsum. Cras sit amet
    orci interdum nulla egestas imperdiet. Cras sit amet pede. Aliquam erat
    volutpat. Nunc venenatis. Nulla mollis, mauris a suscipit cursus, enim
    magna tincidunt velit, in pharetra nulla elit mollis nisl. Integer
    pretium. Mauris vel libero ut lacus commodo interdum. Morbi hendrerit,
    lectus ac varius vulputate, ante nulla pellentesque purus, at vehicula
    nisl libero faucibus nibh. Vestibulum sollicitudin, turpis vitae
    egestas auctor, neque velit egestas quam, id ullamcorper nunc massa ac
    est. Sed augue dolor, laoreet at, mollis nec, hendrerit accumsan, ante.
    Cras tellus elit, ornare nec, adipiscing dapibus, cursus ac, sapien.
    Fusce lorem risus, vehicula id, suscipit at, mattis vel, tortor. Donec
    ligula eros, ornare a, convallis nec, ornare sit amet, augue.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
    posuere cubilia Curae
    </div>
    </div>
    
    </body></html>
    Last edited by mark87; 11-04-2006 at 10:29 PM.

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perfect! You are a saint.

    Im more used to using 100% tables and only really thought about trying div's since I saw it being used and is much, much neater and a lot more customisable.

    Thanks again

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problem.

    Positioning isn't actually normally needed; especially absolute positioning. Alot of people when new to CSS try to use it wrongly!


  •  

    Posting Permissions

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