...

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



Asher01
09-03-2011, 05: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, 02: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, 08:48 AM
Thank you,
However, this doesn't work for how I need to implement it. :(

syco__
09-04-2011, 10: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, 10: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, 11:16 AM
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, 01: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum