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 5 of 5

Thread: liquid height

  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    liquid height

    been searching around but can't figure it out..

    i have a div with overflow: auto and want it to fill 75% of the browser window.

    can't seem to do it right. when I use height: 75% it goes beyond the browser viewport and doesn't allow the overflow to take affect. I don't want to scroll the broswer just the div.


    thanks
    mike

    xhtml1.0strict

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Try this in your CSS:
    Code:
    html {
    height: 100%;
    }
    body {
    height: 100%;
    }
    That way your div knows what to be 75% of.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    still doesn't seem to work.

    ok first one:

    this is how it is now. browser scrolls, div doesn't. I have the html, body 100%.

    http://darkernights.com/test/test1.html

    second one:

    this is how i want it to look. I don't have the html, body 100% on it but it also doesn't have a DOCTYPE. It works exactly how i want it. liquid layout.

    http://darkernights.com/test/test2.html



    maybe you can spot a mistake. thanks for the help. the div i'm working on is albumlist

    Mike
    Last edited by darkernights; 01-06-2008 at 08:47 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Code:
    <!--
    html
    {
    	height: 100%;
    }
    
    body 
    {
    	background: #333333 url(bg.gif) top left no-repeat;
    	font-size: 12px;
    	font-family: Tahoma, Arial, Helvetica, SunSans-Regular, Sans-Serif;
    	color:#cccccc;
    	margin: 55px 75px  20px 75px;
    	height: 100%;
    }
    
    #content 
    {
    	width: 100%;
    height: 75%;
    	padding: 0px;
    	text-align: left;
    	background-color: #444444;
    	clear: both;
    	border: #000000 1px solid;
    }
    
    p, h1, pre 
    {
    	margin: 0px;
    	padding: 10px;
    }
    
    h1 
    {
    	font-size: 11px;
    	font-variant: small-caps;
    	text-align: left;
    	color: #cccccc;
    	background-color: transparent;
    }
    
    a
    {
    	color: #ff66cc;
    	font-size: 11px;
    	background-color:transparent;
    	text-decoration: none;
    }
    
    div.main
    {
    	width: 74%;
    	background: #444444;
    	float: right;
    }
    
    div.albums
    {
    	float: left;
    height: 100%;
    overflow: auto;
    	width: 25%;
    	background: #000000;
    }
    
    div.albumlist
    {
    	overflow: auto;
    	float: left;
    	background: #000000;
    	position: relative;
    	width: 100%;
    }
    
    div.footer
    {
    	background: #93068b;
    	width: 100%;
    	clear: both;
    	height: 20px;
    	text-align: right;
    	color: #000000;
    }
    
    div.footer, .footer a
    {
    	font-size: 9px;
    }
    
    .footer p
    {
    	padding: 2px;
    }
    
    div.header
    {
    	background: transparent;
    	width: 100%;
    }
    
    .header h1
    {
    	text-align: left;
    	margin-left: 135px;
    	float: left;
    	letter-spacing: 4px;
    	padding-bottom: 5px;
    }
    
    .header a
    {
    	font-size:18px;
    	color: #ffffff;
    }
    
    span.spanheader
    {
    	text-align: right;
    	color: #ffffff;
    	width: 100%;
    	margin-top: 17px;
    	right: 15%;
    	position: absolute;
    	font-variant: small-caps;
    }
    
    .spanheader a
    {
    	font-size: 12px;
    	background: #93068b;
    	color: #ffffff;
    	padding: 10px 5px 5px 5px;
    }
    	
    -->
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jul 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i see. thanks. helps a lot. and i see how it would be hard to keep the title on top because the height would be 100&#37; content minus % of the title wich changes with the browser window.

    i'll keep it the way you had it. I also removed the album list div because it really didn't need to be there now.


  •  

    Posting Permissions

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