...

View Full Version : liquid height



darkernights
01-06-2008, 04:37 AM
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

Excavator
01-06-2008, 06:37 AM
Try this in your CSS:


html {
height: 100%;
}
body {
height: 100%;
}

That way your div knows what to be 75% of.

darkernights
01-06-2008, 07:44 AM
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

Excavator
01-06-2008, 03:48 PM
<!--
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;
}

-->

darkernights
01-06-2008, 06:36 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum