CODEWITHSUNDEEP
htmlcssexpand
Alastair W
Alastair W

Reputation: 101

Expanding a div container vertically to fit in another

I've tried many examples in other questions but none seem to work for me. I'm simply trying to create a div container with a side bar 100px wide and will vertically expand with the container if it dynamically grows. See below;The inner div simply won't grow even when I set the height to 100%

enter image description here

My CSS looks this;

  <style>
    #outer {
        border:10px solid #7A838B;
        margin:10px;
        border-radius:30px;
        max-width:500px;
        min-height:200px;
    }

    #leftblock {
        background-color:#7A838B;
        width:100px;
        height:auto;
        border-top-left-radius:20px;
        border-bottom-left-radius:20px;
        margin-left:-10px;
        margin-top:-10px;
    }
    #inner {
        color:white;
        height:100%;
    }
  </style>

and my HTML is like so;

 <div id="outer">
        <div id="leftblock">
            <div id="inner">
                Test
            </div>
        </div>
    </div>

Upvotes: 0

Views: 1595

Answers (2)

Petr Cibulka
Petr Cibulka

Reputation: 2513

It goes as @mmeverdies says,

In order to set height:100%, the parent must establish a defined height too but if height property value is 'inherit', then the grandparent must set it. and so on.

You basically have two options here, either:

1) Define the exact height of the parent element. Then 100% height of the child will work then.

2) Stretch the child element with position: absolute like this: http://jsfiddle.net/r02nbmd9/ - note the position: relative of the parent and position: absolute of child.

<div class="parent"><div class="child"></div></div>

<style>
.parent { 
    position: relative; 
    width: 300px; min-height: 200px; 
    background: yellow; 
}
.child { 
    position: absolute; top: 0; bottom: 0;
    width: 100px;
    background: red;  
} 
</style>

Upvotes: 2

rnrneverdies
rnrneverdies

Reputation: 15627

In order to set height:100%, the parent must establish a defined height too but if height property value is 'inherit', then the grandparent must set it. and so on.

to understand it take a look to this css.

example: for full browser height.

html, body {
  height: 100%;
}
#outer {
  height: 100%;
}
#leftblock {
  height: 100%;
}
#inner {     
    height:100%;
}

by default the HTML height is 0. so, you must set the height property to other than 'inherit' of at least one parent.

Upvotes: 0

Related Questions