Web Analytics Made Easy - StatCounter height:100%; doesn't work with min-height - CodingForum

Announcement

Collapse
No announcement yet.

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

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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.”
    Tags: None
  • #2
    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.

    Comment

    • #3
      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.”

      Comment

      • #4
        What do you need to do? show me a page of what you have and ill have a look at it.
        .pLeAd InSaNiTy.

        Comment

        • #5
          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; Sep 4, 2011, 06: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.”

          Comment

          • #6
            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.”

            Comment

            • #7
              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.

              Comment

              Previous template Next
              Working...
              X
              😀
              🥰
              🤢
              😎
              😡
              👍
              👎