Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts

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

    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:

    Code:
    <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:

    Code:
    <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
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #2
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts
    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

    Code:
    <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>
    .pLeAd InSaNiTy.

  • #3
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Thank you,
    However, this doesn't work for how I need to implement it.
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #4
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts
    What do you need to do? show me a page of what you have and ill have a look at it.
    .pLeAd InSaNiTy.

  • #5
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    removed

    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.
    Last edited by Asher01; 09-04-2011 at 11:17 AM. Reason: Removed URL ... no longer needed
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #6
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    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....

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

    Asher
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #7
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts
    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.
    .pLeAd InSaNiTy.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •