一道CSS布局的面试题

[Seasons123]

面试题的具体要求：

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

仔细分析试题要求，要达到效果其实也并不是太难，仔细看后你会觉得不是那么回事： 1.左边固定，右边自适应布局，这个第一点应该来说是非常的容易，实现的方法也是相当的多，那么就可 以说第一条要求已不是什么要求了； 2,.左右两列等高布局，这一点相对来说要复杂一些，不过你要是了解了怎么实现等高布局，那么也是不 难。我个人认为这个考题关键之处就在考这里，考你如何实现等高布局；所以这一点你需要整明白如何实 现； 3.至于第三条要求，应该来说是很简单的，我们随处都可以看到实现最小高度的代码； 4.第四条这个要求我想是考官想让我们面试的人不能使用js来实现等高布局和最小高度的功能。 上面简单的分析了一下实现过程，那么最终关键之处应该是就是“让你的代码要能同时实现两点，其一就是左边固定，右边自适应的布局；其二就是实现两列等高的布局”，如果这两个功能完成，那么你也就可以交作业了。

[Seasons123]

实现 HTML Markup

        <div id="container">
            <div id="left" class="aside">Left Sidebar</div>
            <div id="content" class="section">Main Content</div>
        </div>

CSS Code

        <style type="text/css">
                *{margin: 0;padding: 0;}
                #container {
                    overflow: hidden;
                }

                #left {
                    background: #ccc;
                    float: left;
                    width: 200px;
                    margin-bottom: -99999px;
                    padding-bottom: 99999px;

                }

                #content {
                    background: #eee;
                    margin-left: 200px;/*==此值等于左边栏的宽度值==*/
                    margin-bottom: -99999px;
                    padding-bottom: 99999px;
                }
                #left,
                #content {
                    min-height: 200px;
                    height: auto !important;
                    height: 200px;
                }
        </style>

[Seasons123]

此处只说明一点：使用正padding和负margin对冲实现多列布局方法 这种方法很简单，就是在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，并设置overflow:hiden把溢出背景切掉。 优点： 这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器 缺点： 这种方法存在一个很大的缺陷，那就是如果要实现每列四周有边框效果，那么每列的底部（或顶部）将无 法有边框效果。（解决方法，http://www.w3cplus.com/css/creaet-equal-height-columns） 另外其它四种实现：http://www.cnblogs.com/heavens/p/4902326.html

吕师兄写过一篇：http://www.cnblogs.com/lvdabao/p/3423986.html