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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。