div 100% in table-cell
Question
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>
2 answers
solution1
1 ACCPTED 2013-04-09 15:35:39
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 */
}
solution2
0 2013-04-09 15:31:53
It appears you are trying for equal height columns? If so, please take a look here:
There are several other articles and tricks of how to achieve this, simply google "equal height columns in html/css"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.