Banner

Sponsor

Login

Welcome Back!
Guest
Guest

Register

Lost your password?

62 users online

Div 100% Height

Div 100% Height

Forums » Web Development » Client Side - HTML/Javascript/etc. » Div 100% Height

Currently viewing this thread: 1 (0 members and 1 guests)

1 2 »
Page 1 out of 2
#1
Old Post May 18th, 2005 08:14 PM
Shahrukh

Shahrukh

Neverside Newbie
Status: Offline!

Div 100% Height

Hey guys, I'm having trouble with setting the height of a div to be 100%. For some reason the method I'm trying doesn't work, it only expands the div to the amount of content within it.

Code:

.splash {
width: 600px;
margin: 0 auto;
height: 100%;
background-image: url('images/bg_middle.gif');
background-repeat: repeat-y;
}

Any help would be appreciated. Thanks in advance. Smile

#2
Old Post May 18th, 2005 08:57 PM
chaka1819

chaka1819

Neverside Newbie
Status: Offline!

this link sould help: http://www.webmasterworld.com/forum83/200.htm

___________________

I fix ugly logos / inBlogs.org Ad-Free Aggregator

#3
Old Post May 18th, 2005 09:19 PM
Shahrukh

Shahrukh

Neverside Newbie
Status: Offline!

Thanks for that. I followed it and added 100% height to the body, but it still doesn't work Sad

#4
Old Post May 18th, 2005 09:58 PM
burrito

burrito

' OR 1=1--
Status: Offline!

If you could provide a link it would really help.

___________________

Neverside Sucks.

#5
Old Post May 18th, 2005 10:27 PM
Shahrukh

Shahrukh

Neverside Newbie
Status: Offline!

I don't want to allow public views yet on my design, it's still a WIP. But here's the full page source code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ELUSIVE-PRODUCTIONS \\ EXHIBIT.web</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-image: url('images/bg_main.gif');
background-color: #F2F2F2;
background-repeat: repeat-x;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
height: 100%;
}

.splash {
width: 600px;
margin: 0 auto;
height: 100%;
background-image: url('images/bg_middle.gif');
background-repeat: repeat-y;
}

.logo {
width: 178px;
height: 146px;
background-image: url('images/main.jpg');
}

</style>
</head>

<body>
<div class="splash">
<table width="600" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="211"><img src="images/mainleft.jpg" width="211" height="505" /></td>
<td width="178" valign="top"><img src="images/main.jpg" width="178" height="146" /></td>
<td width="185"><img src="images/mainright.jpg" width="211" height="505" /></td>
</tr>
</table>
</div>
</body>
</html>

#6
Old Post May 19th, 2005 09:11 AM
Rabbitlab

Rabbitlab

dotcom
Status: Offline!

I don't think it's possible to give a div a height of 100% (atleast not a way that works in all browsers), but I don't think you need it. As far as I can tell, you only need that div to display an Y repeating background. Just use
html {background: #F2F2F2 url(images/bg_middle.gif) repeat-y;}
and
body { background: url(images/bg_main.gif) repeat-x;}

Depending on the effect you're after, you might have to switch the background from body to html and vice versa.

___________________

Blog / Lab

#7
Old Post May 19th, 2005 05:53 PM
Shahrukh

Shahrukh

Neverside Newbie
Status: Offline!

I understand what you mean, and I know that method would work too. The problem is, the background is like a plain white design, with a 600px width, vertically repeating blue pattern going down the middle. The only way I can position this background to be in the middle is using a DIV, rather than assigning the background to the body itself.

I hope what I've wrote is understandable. If not just let me know and I'll try to clear up what I mean with a sample diagram. Smile

#8
Old Post May 19th, 2005 06:13 PM
Rabbitlab

Rabbitlab

dotcom
Status: Offline!

If you want your image centered, just use { background: #F2F2F2 url(images/bg_middle.gif) repeat-y center;}

___________________

Blog / Lab

#9
Old Post May 19th, 2005 11:31 PM
Shahrukh

Shahrukh

Neverside Newbie
Status: Offline!

lol it's slightly more complicated than that. I already have a background image repeating horizontally at the top of the page, would I be able to set a second background to the page to repeat vertically as you've mentioned above?

The way I currently have it, is the horizontally repeating background set for the body, and the vertically repeating one (that's supposed to be centred) set to the background for a div container, but the div container isn't expanding to stretch to 100% of the window height.

#10
Old Post May 19th, 2005 11:46 PM
Simon

Simon

Jag är Gandalf den grå och den vite, men vem är du?
Status: Offline!

Look at how the backgrounds are set up here: http://aidanrowe.com/blog/. Is that what you are looking for?

___________________

Neversidian, your staff is broken.

1 2 »
Page 1 out of 2
Quick Jump:

Main Navigation

Site & Graphic Design by Aeon Tan
Developed by Jeremie Pelletier & Scott Roach

NeverAPI generated this page in 0.019 seconds.