CSS布局——左定宽度右自适应宽度而且等高布局

时间 2019-11-07

标签 css 布局宽度自适应而且等高栏目 CSS 繁體版

原文原文链接

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题，须要解决，花了点时间写了几个DEMO,放上来与你们分享受。那么咱们在看DEMO以前一块儿先来看看这个面试题的具体要求吧：css

左侧固定宽，右侧自适应屏幕宽；
左右两列，等高布局；
左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）
要求不用JS或CSS行为实现；
仔细分析试题要求，要达到效果其实也并非太难，只是给人感受像有点蛋疼的问题同样。可是你仔细看后你会以为不是那么回事：html

左边固定，右边自适应布局，这个第一点应该来讲是很是的容易，实现的方法也是至关的多，那么就能够说第一条要求已不是什么要求了；
左右两列等高布局，这一点相对来讲要复杂一些，不过你要是了解了怎么实现等高布局，那么也是不难。我我的认为这个考题关键之处就在考这里，考你如何实现等高布局；因此这一点你须要整明白如何实现；
至于第三条要求，应该来讲是很方面的，咱们随处均可以看到实现最小高度的代码；
第四条这个要求我想是考官想让咱们面试的人不能使用js来实现等高布局和最小高度的功能。
上面简单的分析了一下实现过程，那么最终关键之处应该是就是“让你的代码要能同时实现两点，其一就是左边固定，右边自适应的布局；其二就是实现两列等高的布局”，若是这两个功能完成，那么你也就能够交做业了。那么下面咱们就先来看看这两点是如合实现：面试

1、两列布局：左边固定宽度，右边自适应宽度浏览器

这样的布局，其实不是难点，我想不少同窗都有实现过，那么我就在此稍微介绍两种经常使用的方法：安全

方法一：浮动布局app

这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果ide

HTML Markup布局

<div id="left">Left sidebar</div>
    <div id="content">Main Content</div>

CSS Code学习

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

        #left {
            float: left;
            width: 220px;
            background-color: green;
        }

        #content {
            background-color: orange;
            margin-left: 220px;/*==等于左边栏宽度==*/
        }
    </style>

上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值，你们能够点击查看上面代码的DEMO测试

方法二：浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果，你们能够仔细对比一下上面那种实现方法，看看二者有什么区别：

HTML Markup

<div id="left">
        Left Sidebar
    </div>
    <div id="content">
        <div id="contentInner">
            Main Content
        </div>
    </div>

CSS Code

*{
        margin: 0;
        padding: 0;
    }
    #left {
        background-color: green;
        float: left;
        width: 220px;
        margin-right: -100%;
    }
    
    #content {
        float: left;
        width: 100%;
    }
    
    #contentInner {
        margin-left: 220px;/*==等于左边栏宽度值==*/
        background-color: orange;
    }

这种方法看上去要稍微麻烦一点，不过也是很是常见的一种方法，你们能够看看他的DEMO效果。感受一下，和前面的DEMO有什么不一样之处。

我在这里就只展现这两种方法，你们确定还有别的实现方法，我就不在多说了，由于咱们今天要说的不是这个问题。上面完成了试题的第一种效果，那么你们就要想办法来实现第二条要求——两列等高布局。这一点也是本次面试题相当重要的一点，若是你要是不清楚如何实现等高布局的话，我建议您先阅读本站的《八种建立等高列布局》，里面详细介绍了八种等高布局的方法，并附有相关代码，并且咱们后面的运用中也使用了其中的方法。

如今关键的两点都完成了，那么咱们就须要实现第三条要求，实现最小高度的设置，这个方法很简单：

min-height: 200px;
    height: auto !important;
    height: 200px;

上面的代码就轻松的帮咱们实现了跨浏览器的最小高度设置问题。这样一来，咱们能够交做业了，也完面了这个面试题的考试。为了让你们更能形象的了解，我在这里为你们准备了五种不一样的实现方法：

方法一：

别的很少说，直接上代码，或者参考在线DEMO，下面全部的DEMO都有HTML和CSS代码，感兴趣的同窗本身慢慢看吧。

HTML Markup

<div id="container">
        <div id="wrapper">
            <div id="sidebar">Left Sidebar</div>
            <div id="main">Main Content</div>
        </div>
    </div>

CSS Code

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: auto;
        }

        body {
            margin: 0;
            padding: 0;

        }

        #container {
            background: #ffe3a6;
        }

        #wrapper {
            display: inline-block;
            border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/
            position: relative;
            vertical-align: bottom;
        }

        #sidebar {
            float: left;
            width: 200px;
            margin-left: -200px;/*==此值等于左边栏的宽度值==*/
            position: relative;            
        }

        #main {
            float: left;
        }    

        #maing,
        #sidebar{
            min-height: 200px;
            height: auto !important;
            height: 200px;
        }
    </style>

查看在线DEMO。

方法二

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>

查看在线的DEMO。

方法三：

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{
             background-color:#0ff;
             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;
         }

查看在线DEMO效果。

方法四：

HTML Markup

<div id="container2">
        <div id="container1">
                <div id="col1">Left Sidebar</div>
                <div id="col2">Main Content</div>
         </div>
    </div>

CSS Code

*{padding: 0;margin:0;}
    #container2 {
          float: left;
          width: 100%;
          background: orange;
          position: relative;
          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;
        }

查看在线DEMO。

方法五：

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中，没有设置他们之间的间距，若是您想让他们之间有必定的间距，有两种方法可能实现，其一在上面的DEMO基础上修改相关参数，其二，在相应的里面加上"div"标签，并设置其“padding”值，这样更安全，不至于打破你的布局
由于咱们这里有一列使用了自适应宽度，在部分浏览器下，当浏览器屏幕拉至到必定的大小时，给咱们带来的感受是自适应宽度那栏内容像是被隐藏，在你的实际项目中最好能在“body”中加上一个“min-width”的设置。
那么有关于这个面试题，就我本身的拙见，就说到这吧。但愿你们会喜欢这样的答案，若是您有更好的答案，烦请告诉我一下，让我也好好学习学习。若是大有发现有什么错误，或者对这个有更好的意见，能够在下面的评论中直接给我留言。

如需转载烦请注明出处：W3CPLUS