[SOLVED] 100% Height

tarun · September 19, 2007

Right, I have this 100% height layout but it isn't the whole height of the area avaiable its a maybe few pixel over. I have a included a 2 screen shots one is a real screen shot of what it looks like. The other is an edited version, which is what i want it to look like. Both layouts appear the same in IE an Firefox.

Screenshots:

Real screenshot of what I have now.

Edited screenshot of what I aim to have/want.

I have also provided the HTML Code

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
<title>...</title> 
<style type="text/css" media="screen"> 
body { 
margin: 0; 
padding: 0; 
height: 100%;
} 
#left { 
position: absolute;
left: 0;
top: 0;
padding: 0;
width: 200px;
height: 100%;
color: #333;
background: #eaeaea;
border: 1px solid #333;
}

#content {
position: absolute;
left: 200px;
top: 0;
right: 0;
padding: 0;
height: 100%;
color: #333;
background: #ffc;
border: 1px solid #333;
overflow: scroll;
}

#left p {
padding: 10px;
}

#content p {
padding: 10px;
}
</style> 
</head> 

<body> 
<div id="left"> 
<p class="top">aopjfshkmal;hba ha</p> 

<p>aharijkuyjrawtrwh</p> 

<p>auetbvdfhiti7okl,hevd</p> 
</div> 

<div id="content"> 
<p>Tsetukuyskpf;ps'ra3w'lmrtefkdylatsururtyryrt.fok./owe sjheak, asiuflajrlk eaiojra.r arsfs eatheakra gaiojtnar atkajehtakn.trna</p> 
</div>
</body> 
</html>

dbrimlow · September 19, 2007

remove "overflow: scroll;" and replace it with "overflow: hidden;"

tarun · September 20, 2007

I don't think you understand.

But ifugured out the problem.

It was the border around the divs.

Sign In

[SOLVED] 100% Height

Recommended Posts

tarun

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

tarun

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information