VUE(四)•iview頁面佈局之左側邊欄撐滿屏幕

左側固定，右側自適應（或右側固定，左側自適應）佈局方法

寫在前面

歸納總結了幾種比較ok的方法，左右佈局是基本功之一，雖然現在我們基本在開發中都會使用類似antd，element，iview這些前端ui框架，這些框架已經把傳統的佈局樣式給封裝的很完美了，但是作爲前端的css基礎，我認爲這些也是必須掌握的，而且很有可能在實際開發過程中就遇到了呢

• 方法一：左側div浮動 右側元素設置margin-left自適應
• 方法二：左側div浮動，右側元素創建BFC
• 方法三：左側div採用絕對佈局，右側元素設置margin-left自適應
• 方法四：外層父級元素使用table佈局，子元素使用table-cell
• 方法五：雙float + calc計算寬度
• 方法六：flex佈局

首先列出通用的css樣式
通用css樣式：

.mainContent {
  /* 基本最外層父級元素，不需要做任何特殊處理,這裏寫着，只是在實際開發中，外層肯定會有一個嵌套的父級元素 */
}

.main-1::after {
  /*通用css 用於清除浮動，使用浮動佈局必然會涉及到清除浮動，這裏我只用了最常用的方法，其餘方法請讀者自行搜索*/
  content: "";
  clear: both;
  display: block;
  height: 0;
}

.leftDivCommon {
  /*左側佈局通用樣式*/
  background: gray;
  width: 200px;
  height: 400px;
}

.rightDivCommon {
  /*右側佈局通用樣式*/
  background: #feee;
  height: 300px;
}

 

方法一：左側div浮動 右側元素設置margin-left自適應

html:

   <div>
          <h1>方法一：左側div浮動 右側元素設置margin-left自適應</h1>
          <div className="mainContent main-1">
            <div className="left-1 leftDivCommon">This is left</div>
            <div className="right-1 rightDivCommon">This is right</div>
          </div>
        </div>

css:

.left-1 {
  float: left;
}

.right-1 {
  /* 第一種方法，右側元素必須寫margin-left，距離等於左側元素的寬度，
     因爲左側元素已經浮動了，浮動元素是脫離文檔流的，如果不加這個margin，右側寬度和左側如果 
     一樣，就沒什麼區別，如果右側寬度和
     左側不一樣的話，那麼加上背景顏色後，會出現右側包裹左側的情況出現，
     就是因爲左側元素脫離文檔流後，右側未浮動的元素會覆蓋文檔流當前的全部塊級
  */
  margin-left: 200px;
}

方法二：左側div浮動，右側元素創建BFC（關於BFC的詳細介紹，請讀者自行搜索，很多文章已經介紹的很清楚了）

html：

        <div>
          <h1>方法二：左側div浮動，右側元素創建BFC</h1>
          <div className="mainContent main-1">
            <div className="left-2 leftDivCommon">This is left</div>
            <div className="right-2 rightDivCommon">This is right</div>
          </div>
        </div>

css：

.left-2 {
  float: left;
}

.right-2 {
  /* 
    創建BFC的方法，BFC是一個上下文環境，創建方法如下
    float的值不爲none
    position的值不爲static或者relative
    display的值爲 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個
    overflow的值不爲visible
  */
  overflow: auto;
}

方法三：左側div採用絕對佈局，右側元素設置margin-left自適應

html：

        <div>
          <h1>方法三：左側div採用絕對佈局，右側元素設置margin-left自適應</h1>
          <div className="mainContent-3 main-1">
            <div className="left-3 leftDivCommon">This is left</div>
            <div className="right-3 rightDivCommon">This is right</div>
          </div>
        </div>

css：

.mainContent-3 {
  position: relative;
  min-height: 400px;
}

.left-3 {
  /* 
    這個方法有兩個弊端，不建議採用這種方法
    - 必須規定外層父級元素的position是relative或者absolute
    - 採用絕對佈局的方法的問題在於無法使用清除浮動讓最外層的父級元素把全部內容給包住，如果是浮動元素，可以在外層包裹標籤上寫清除浮動，
    這種方法要解決這個問題，只能在外層寫height來強制規定高度包含左側的高度，這種方法很不好，因爲裏面有可能還會包含一些其他的元素，需要精確計算好高度
  */
  position: absolute;
}

.right-3 {
  margin-left: 200px;
}

方法四：外層父級元素使用table佈局，子元素使用table-cell

html：

        <div>
          <h1>方法四：外層父級元素使用table佈局，子元素使用table-cell</h1>
          <div className="mainContent-4">
            <div className="left-4 leftDivCommon">This is left</div>
            <div className="right-4 rightDivCommon">This is right</div>
          </div>
        </div>

css：

.mainContent-4 {
  /*
  對table-cell元素設置百分比（如100%）的寬高值時無效的，但是可以將父元素設置display:table，
  再將父元素設置百分比寬高，子元素table-cell會自動撐滿父元素。這就可以做相對於整個頁面的水平垂直居中
  注意：
  （1）display: table時padding無效
  （2）display: table-row時margin、padding無效
  （3）display: table-cell時margin無效
  */
  display: table;
  width: 100%;
}

.left-4 {
  display: table-cell;
}

.right-4 {
  display: table-cell;
}

方法五：雙float + calc計算寬度

html：

        <div>
          <h1>方法五：雙float + calc計算寬度</h1>
          <div className="mainContent main-1">
            <div className="left-5 leftDivCommon">This is left</div>
            <div className="right-5 rightDivCommon">This is right</div>
          </div>
        </div>

css：

.left-5 {
  float: left;
}

.right-5 {
  float: left;
  width: calc(100% - 200px);
}

方法六：flex佈局

html：

        <div>
          <h1>方法六：flex佈局</h1>
          <div className="mainContent-6 main-1">
            <div className="left-6 leftDivCommon">This is left</div>
            <div className="right-6 rightDivCommon">This is right</div>
          </div>
        </div>

css：

.mainContent-6 {
  display: flex;
}

.left-6 {
  flex: 0 0 200px;
}

.right-6 {
  flex: 1;
}