auto expand div height
<html><head><title>Test</title>
<style>
.main{width:600px;border:1px solid red; }
.main .left{background:lightblue; 开发者_开发问答width:100px;clear:both; float:left;}
.main .right{margin-left:100px;background:lightyellow; }
</style>
</head><body>
<div class="main">
<div class="left">
title
</div>
<div class="right">
<div id="item">item</div>
<div id="item">item</div>
<div id="item">item</div>
<div id="item">item</div>
<div id="item">item</div>
<div id="item">item</div>
<div id="item">item</div>
</div>
</div>
</body></html>
How to change the CSS to make the page display like the dialog shows?
PS,I think it's a way that to make the "left" div's height auto expand when the height of the "right" div or parent div expand, but I don't know how.
I have a very simple solution. Use css attribute display: table-cell; in .left{} & .right{} style like this:
.left, .right {
display: table-cell;
width:100px;
vertical-align:middle;
text-align:center;
}
See the Demo: http://jsfiddle.net/rathoreahsan/qcCPG/3/
Here is different totally style that works:
.main{width:600px;border:1px solid red; height:auto; position:relative }
.main > div {display:inline-block; vertical-align:top; }
.main .left{background:lightblue; width:100px; height: 100%; }
.main .right{margin-left:5px; background:lightyellow; height: 100% }
You may want to go through this CSS tutorials at w3schools.
you can also use FLEX or combine FLEX with GRID
/******************************************
1. FLEX
*******************************************/
.main{
display: flex;
flex-direction: row;
}
.left {
width: 30%;
align-self: center;
text-align: center;
}
.right {
flex-grow: 1;
}
/******************************************
2. FLEX with GRID
*******************************************/
.main{
display: grid;
grid-template-columns: 30% 1fr;
}
.left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
have fun
加载中,请稍侯......
精彩评论