Hi guys,
I'm trying to create a page that has a gradient background with a black content div in the centre which stretches to fill the height of the window.
I've just been trying to get this black content bit in the centre with a 100% height like this:
html, body, #wrapper
{
height: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper
{
margin: 0 auto;
text-align: left;
width: 1024px;
background-color: #000000;
}
this works just fine in IE but not in firefox. I know that 100% is in relation to it's parent height, but is there any way to get around this so that the div will be 100% of the window height without using javascript.
I'm trying to create a page that has a gradient background with a black content div in the centre which stretches to fill the height of the window.
I've just been trying to get this black content bit in the centre with a 100% height like this:
html, body, #wrapper
{
height: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper
{
margin: 0 auto;
text-align: left;
width: 1024px;
background-color: #000000;
}
this works just fine in IE but not in firefox. I know that 100% is in relation to it's parent height, but is there any way to get around this so that the div will be 100% of the window height without using javascript.
posted by:
|
United Kingdom
|
-
Re: 100% Height??!! Why don't it work
Thu, March 13, 2008 - 5:26 AMuse min-height: 100%; this ocourse wont work in ie<7 so youll have to use an ie conditional statement to target that set of browsers. -
-
Re: 100% Height??!! Why don't it work
Thu, March 13, 2008 - 5:32 AMhmmmm
tried that but no success...
can you post a working example? -
-
Re: 100% Height??!! Why don't it work
Thu, March 13, 2008 - 6:51 AM<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[http://]" title="www.w3.org/TR/xhtml1/DTD/...nsitional.dtd">">www.w3.org/TR/xhtml1/DTD/...nsitional.dtd">
<html>
<head>
<style type="text/css">
html { height: 100%; }
body {
height: 100%;
margin: 0px;
background-color: #f00;
}
#shell {
margin: 0 auto;
background-color: #000;
min-height: 100%;
width: 950px;
color: #fff;
}
</style>
</head>
<body>
<div id="shell">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html> -
-
Re: 100% Height??!! Why don't it work
Thu, March 13, 2008 - 7:47 AMthanks pixelslut
works fine on the example you gave, for some reason when i apply it to my own it don't seem to work as well.
I must be just messing it up somewhere. Once i know the css is right that's a start!
thanks. -
-
Re: 100% Height??!! Why don't it work
Thu, March 13, 2008 - 8:02 AMdunno what i'm doin wrong...
html
{
height: 100%;
}
body
{
background-color: #f2f2f0;
margin: 0px;
font-size: 9pt;
height: 100%;
}
#wrapper
{
min-height: 100%;
margin: 0px auto;
width: 1024px;
background-color: #000000;
}
<body>
<div id="wrapper">
why ain't it working?
</div>
</body>
-
-
Re: 100% Height??!! Why don't it work
Thu, March 13, 2008 - 8:25 AM<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"" title="www.w3.org/TR/xhtml1/DT...itional.dtd">">www.w3.org/TR/xhtml1/DT...itional.dtd">
<html>
<head>
<style type="text/css">
html
{
height: 100%;
}
body
{
background-color: #f2f2f0;
margin: 0px;
font-size: 9pt;
height: 100%;
}
#wrapper
{
min-height: 100%;
margin: 0px auto;
width: 1024px;
background-color: #000000;
color: #fff;
}
</style>
</head>
<body>
<body>
<div id="wrapper">
why ain't it working?
</div>
</body>
</body>
</html>
-
-
-
-
-
