这个面试题的具体要求吧:
- 左侧固定宽,右侧自适应屏幕宽;
- 左右两列,等高布局;
- 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高)
- 要求不用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{100%;border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/margin-left:-220px;/* 宽度大小等与边栏宽度大小*/float:right;}#sidebar{background-color:#f00;220px;float:right;margin-left:-220px;/* 宽度大小等与边栏宽度大小*/}#content,#sidebar {min-height: 200px;height: auto !important;height: 200px;}