div side by side and the same height specifies the height of the non-implemented method of non-js

Previous introduces the implementation of several div side by side centered point here , but specifies the height, but recently a small project does not need to achieve two div set height, but always two div height will always be equal,

Here is the main layout
 < div class = "Container" > 
  < div ID = "Dplayer" > </ div > 
    < div ID = "List" > </ div > 
</ div >

The first way table layout display: table + display: table-cell mode:

.container {
	width: 80%;
	background-color: #FFF;
	margin: 0 auto;
	border: 1px solid #F00;
	display: table;

}
#dplayer {
	width: 80%;
	display: table-cell
}
#list {
	width: 20%;
	background: #000;
	display: table-cell
}

　

But this has a drawback, display: table-cell can not specify the height, width, margin .....

Another implementation manner of display: -webkit-box;

.container {
    width: 80%;
    background-color: #FFF;
    margin: 0 auto;
    border: 1px solid #F00;
    display: -webkit-box;
}
#dplayer {
    width: 80%;
}
#list {
    width: 20%;
    background: #000;
}

Operating results and above, but you can set a maximum of div of max-height, does not cause the contents of a little too lonely looks like this

There are many specific implementation methods, such as table, displa: fix and so on, there is not much to say