两列等高，左定宽，右自适应

这个面试题的具体要求吧：

1. 左侧固定宽，右侧自适应屏幕宽；
2. 左右两列，等高布局；
3. 左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）
4. 要求不用JS或CSS行为实现；

 

解决方法：

HTML Markup

		<div id="container">

                         <div id="content">Main Content</div>

			<div id="sidebar">Left Sidebar</div>

		</div>	

CSS Code

*{margin: 0;padding: 0;}

#container{

                         background-color:#0ff; 

                         overflow:hidden; 

                         padding-left:220px; /* 宽度大小等与边栏宽度大小*/ 

 }

* html #container{ 

                        height:1%; /* So IE plays nice */ 

}

#content{

                        width:100%;

                        border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/

                        margin-left:-220px;/* 宽度大小等与边栏宽度大小*/

                        float:right;

}

#sidebar{

                        background-color:#f00;

                        width:220px;

                        float:right;

                        margin-left:-220px;/* 宽度大小等与边栏宽度大小*/

}

#content,#sidebar {

                        min-height: 200px;

                        height: auto !important;

                        height: 200px;

}