左定宽度右自适应宽度并且等高布局实现代码

overflow: hidden;
}
#container1 {
float: left;
width: 100%;
background: green;
position: relative;
left: 220px;/* 宽度大小等与边栏宽度大小*/
}

#col2 {
position: relative;
margin-right: 220px;/* 宽度大小等与边栏宽度大小*/
}

#col1 {
width: 220px;
float: left;
position: relative;
margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
}

#col1,#col2 {
min-height: 200px;
height: auto !important;
height: 200px;
}

方法五：

HTML Markup

复制代码
<div id=”container1″ >
<div id=”container” >
<div id=”left” >Left Sidebar </div>
<div id=”content” >
<div id=”contentInner” >Main Content </div>
</div>
</div>
</div>

CSS Code

复制代码
*{padding: 0;margin: 0;}
#container1 {
float: left;
width: 100%;
overflow: hidden;
position: relative;
background-color: #dbddbb;
}
#container {
background-color: orange;
width: 100%;
float: left;
position: relative;
left: 220px;/* 宽度大小等与边栏宽度大小*/
}
#left {
float: left;
margin-right: -100%;
margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
width: 220px;
}
#content {
float: left;
width: 100%;
margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
}
#contentInner {
margin-left: 220px;/* 宽度大小等与边栏宽度大小*/
overflow: hidden;
}

#left,
#content {
min-height: 200px;
height: auto !important;
height: 200px;
}

针对上面的面试题要求，我一共使用了五种不同的方法来实现，经过测试都能在各浏览器中运行，最后我有几点需要特别提出：

上面所有DEMO中，要注意其方向性的配合，并且值要统一，如果您想尝试使用自己布局需要的宽度值，请对照相关代码环节进行修改；
上面所有DEMO中，没有设置他们之间的间距，如果您想让他们之间有一定的间距，有两种方法可能实现，其一在上面的DEMO基础上修改相关参数，其二，在相应的里面加上"div"标签，并设置其“padding”值，这样更安全，不至于打破你的布局
因为我们这里有一列使用了自适应宽度，在部分浏览器下，当浏览器屏幕拉至到一定的大小时，给我们带来的感觉是自适应宽度那栏内容像是被隐藏，在你的实际项目中最好能在“body”中加上一个“min-width”的设置。

那么有关于这个面试题，就我自己的拙见，就说到这吧。希望大家会喜欢这样的答案，如果您有更好的答案，烦请告诉我一下，让我也好好学习学习。如果大有发现有什么错误，或者对这个有更好的意见，可以在下面的评论中直接给我留言。