PDA

View Full Version : height:100%; doesn't work with min-height



Asher01
09-03-2011, 06:07 PM
I seem to have run into a problem...

If I tell a div to be say, 100% the height of the div it is contained it, it seems to work without a problem... except if the div it's contained it has been specified as a min-height.

Consider the following senario:




<html>
<head>
<style type="text/css">


#container
{
width:924px;
height:568px;
margin:0;
border:none;
background-color:#737373;

}

#vertical-left
{
width:10px;
height:100%;
margin:0;
border:none;
float:left;
background-color:#E6E600;
}

#vertical-right
{
width:10px;
height:100%;
margin:0;
border:none;
float:right;
background-color:#E6E600;
}

</style>
</head>
<body>

<div id="div">

<div id="container">

<div id="vertical-left">
</div>
<div id="vertical-right">
</div>

</div>

</div>

</body>
<html>



That works perfectly, just how I'd expect ... however if I do this:



<html>
<head>
<style type="text/css">


#container
{
width:924px;
min-height:568px;
margin:0;
border:none;
background-color:#737373;

}

#vertical-left
{
width:10px;
height:100%;
margin:0;
border:none;
float:left;
background-color:#E6E600;
}

#vertical-right
{
width:10px;
height:100%;
margin:0;
border:none;
float:right;
background-color:#E6E600;
}

</style>
</head>
<body>

<div id="div">

<div id="container">

<div id="vertical-left">
</div>
<div id="vertical-right">
</div>

</div>

</div>

</body>
<html>



The ONLY difference is I changed the parent div from height:568px; to min-height:568px;

Funny thing is, I realized that by itself, that code will make the yellow verticals 100% of the screen instead of 100% of the div it is contained in. However I have the code usually in amongst other code, the just don't show up at all.

Any pointers would be appreciated,
Asher

syco__
09-04-2011, 03:06 AM
I played with your code a little and made a few changes as 100% does mean 100% of the screen.

1. gave your #container a margin-left
2. put a another div called bottom and made its width 10px wider on each side

the 2nd will always be the same as 1st height


<html>
<head>
<style type="text/css">

#container
{
width:924px;
min-height:568px;
margin:0;
border:none;
background-color:#737373;
margin-left:15px;
}

#bottom
{
background-color: #E6E600;
width: 954px;
}

</style>
</head>
<body>

<div id="bottom">
<div id="container">

</div>
</div>

</body>
<html>

Asher01
09-04-2011, 09:48 AM
Thank you,
However, this doesn't work for how I need to implement it. :(

syco__
09-04-2011, 11:38 AM
What do you need to do? show me a page of what you have and ill have a look at it.

Asher01
09-04-2011, 11:56 AM
removed (http://oliveprocessors.com.au/)

I want to make it so that if I need to put more content in the <div id="content"> it will extend... but so will everything else.

To do that I thought I would need to set the #container with a min-height:568px; then also set #content with a min-height:518px;.

But then to make the rest stay the same length I would need to set their heights to height:100%; .. which would be tricky seeing as there are also horizontal divs in the way.

Ummmm.... now I'm confused with myself. :(

Asher01
09-04-2011, 12:16 PM
Ummm... I just kinda realized.... those menu's div's aren't going to be visible and they don't need to extend with the content... I'll blame it on no sleep.

And I've figured I just need to min-height all the body, #body, #container, #content...

Thanks for answering though.... :o :o

A mod could delete this thread if they want...

Asher

syco__
09-04-2011, 02:26 PM
All you had to do is not set any length and it will just be the length on what ever content is in the div.