div 100% in table-cell

I wrote this code and I don't have idea why it doesn't work 100% in #sidebar (display: table-cell).

This is my code CSS:

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

body { margin: 0 auto; width: 800px; }

#wrapper{
    display: table;
    overflow: hidden; /* clearance */
}

#panel1, #panel2{
    display: table-cell;
    vertical-align: top;
    width:400px;
}

#panel1{ background-color: blue; }

#panel2{ background-color: grey; }



#sidebar, #content{ float:left; }

#sidebar{
    background-color: yellow;
    width: 100px;
    height: 100%;
}

</style>
</head>

And HTML code :

<body>

    <div id="wrapper"> 

        <div id="panel1"> 
            <div id="sidebar">menu</div>

            <div id="content">
                <br/><br/><br/><br/><br/><br/><br/><br/><br/>end
            </div>
        </div>

        <div id="panel2"><br/></div>

    </div>

</body>

Solution

From what I understand you want the sidebar height to be 100% of the div containing it (in this case it is panel1)

The reason your sidebar is not displaying the way that you want it too is because you do not have a height set for the div that is holding the menu (in your code this would be the 'panel1' div).

To fix this issue just set a height for the container ('panel1') and your sidebar will adjust accordingly.

CSS

#panel1 { 
     background-color: blue;
     height: 600px; /* You can set this height to whatever size you prefer */
     }

You can view it in action here