CSS 實現可拉伸調整尺寸的分欄布局

作者：XboxYan 2022-05-26 00:06:19

開發前端

雖然 Firefox 在垂直方向上略有缺陷，如果你對兼容性沒太多需求，比如公司內部項目，Electron 應用等，那就放心大膽的使用吧，千萬不要被兼容性束縛了你的思維。

很多頁面布局，特別是那種工具類的、比如編輯器、可視化平臺等，為了充分的利用屏幕空間，都會提供拖拽調節各個分欄尺寸的功能，比如像 vscode。

vscode

抽象開來，其實就是這樣一個布局，左右、上下都是可以調整的，如下：

可拉伸調整的分欄布局

你也可以先看實際效果：CSS 可拉伸分欄布局 2(juejin.cn)[1]。

是不是非常靈活呢?其實純 CSS 也是可以實現這樣的效果的，一起看看吧！

一、基本實現原理

實現這個效果需要借助 resize 特性，可以天然的實現元素拉伸特性。最常見的就是 textarea，默認就是可以拉伸的。

<textarea></textarea>

textare resize

不過，我們這里需要的不是textarea，而是普通的元素。普通的元素要實現這樣的效果也很容易，只需要在overflow不是visible的情況下，添加resize屬性就行了。

.resizable {
  resize: both;
  overflow: scroll;
}

resize

原理就是這么簡單，那么如何運用呢?

二、自定義右下角 resize

雖然看似可以拉伸，但是可拉伸范圍實在是太小了。該如何增加可拉伸范圍呢?這里有兩種思路：

通過偽元素自定義
容器整體放大

先說第一種思路。要定義尺寸，首先需要搞明白 resize指的是什么?經過簡單的測試發現，在 chrome 中，resize其實就是橫縱滾動條的交界處，比如直接設置滾動條的尺寸。


::-webkit-scrollbar {
  width: 20px; 
  height: 20px;
  background-color: rosybrown;
}

resize 其實是滾動條交界處

現在將滾動條高度改大一點：

::-webkit-scrollbar {
  width: 20px; 
  height: 100px;
  background-color: rosybrown;
}

可以看到 resize也跟著變化了。

修改 resize 尺寸

當滾動條高度足夠大時，右側就變成整條都可以拉伸了。

::-webkit-scrollbar {
  width: 20px; 
  height: 100vh;
  background-color: rosybrown;
}

整列的resize

然后，這個斜線條紋可以用偽元素::-webkit-resizer來修改。

div::-webkit-resizer{
  background-color: royalblue;
}

自定義 resize 顏色

不過遺憾的是，這種方式只適合-webkit-瀏覽器，所以firefox就不行了。

下面來看第二種思路：整體放大。

這里說的整體放大，指的是將整個容器通過transform進行放大，這樣一來，右下角的resize也會跟隨放大了，比如：

div{
  width: 300px;
  height: 20px;
  transform: scaleY(100);/*足夠大的放大倍數*/
  overflow: scroll;
  resize: horizontal;
}

通過 transfrom 整體放大resize

這樣也能達到整條側邊都可以拉伸的目的了。

下面來看實際應用吧！

三、兩欄拉伸布局

循序漸進，先實現兩欄布局。比如這樣：

兩欄布局

通常這類布局都有一定的約束，比如這里的 MAIN是自適應空間的，SIDE是固定尺寸，先快速寫出布局和樣式；

<div class="con">
  <aside>
    SIDE
  </aside>
  <main>
    MAIN
  </main>
</div>

關鍵樣式如下：

.con{
  display: flex;
}
aside{
  width: 200px;
}
main{
  flex: 1;
}

那么，如何讓左邊側邊欄居右拖拽功能呢?很簡單，將剛才可拉伸的元素放入側邊欄，讓寬度由里面的拉伸元素決定(flex 子元素天然支持該特性)，內容則用絕對定位覆蓋來實現，實現如下：

<aside>
  <div class="resize"></div>
  <div class="line"></div>
  <section>SIDE</section>
</aside>

由于 firefox的resize無法自定義，所以這里單獨一個標簽來模擬拉伸軸。

aside{
  position: relative;
  overflow: hidden;

}
.resize{
  width: 200px;
  height: 16px;
  transform: scaleY(100);
  overflow: scroll;
  resize: horizontal;
  opacity: 0;
}
.line{
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  bottom: 0;
  background-color: royalblue;
  opacity: 0;
  transition: .3s;
  pointer-events: none;
}

.resize:hover+.line,
.resize:active+.line{
  opacity: 1;
}

這樣就實現了左邊側邊欄拉伸的功能。

兩欄可拉伸布局

四、三欄拉伸布局

有時候會出現兩邊側邊欄，中間部分是自適應的，如下：

三欄布局

這種如何實現呢?首先按照兩欄布局的思路。

<div class="con">
  <aside>
    <div class="resize"></div>
    <div class="line"></div>
    <section>SIDE</section>
  </aside>
  <main>
    MAIN
  </main>
  <aside class="right">
    <div class="resize"></div>
    <div class="line"></div>
    <section>SIDE</section>
  </aside>
</div>

不過這樣會有一個很明顯的問題，由于resize是在右側，如果放在右邊側邊欄，那肯定就相反了，具體表現就是，往右拉伸，右側邊欄反而增大，不符合直覺。

有沒有什么辦法讓resize到左邊來呢?

首先想到的是通過翻轉變換，水平方向上翻轉可以scaleX(-1)來實現，合并起來就是。

.right .resize{
  transform: scale(-1, 100);
}

在 Chrome 下表現不錯

Chrome 效果

但是，Firefox 就有點奇怪了。

Firefox 效果

朝右邊拖拽，右側邊欄寬度反而增加。究其原因，在 Firefox上，transform水平翻轉僅僅改變了視覺上的效果，并沒有改變交互行為，有沒有辦法可以真正改變resize的位置呢?

還真有，不過僅可以改變水平方向上的位置，通過direction屬性。這是一個可以改變文檔方向流的屬性，有些語言方向是從右往左的，所以設置后，resize 也從右側變到了左側。

通過 direction 改變resize 位置

所以實現就是。

.right .resize{
  direction: rtl;
}

這樣下來，Chrome 和 Firefox 均正常了。

Firefox 效果

完整代碼可以訪問：CSS 可拉伸分欄布局 (codepen.io)[2]或者CSS 可拉伸分欄布局 (juejin.cn)[3]。

五、其他組合分欄效果

組合分欄效果少不了垂直方向上的。

垂直方向的分欄和水平方向大同小異，只需要水平方向上縮放足夠大就行了。

.resize-top{
  width: 16px;
  resize: vertical;
  transform: scaleX(100);
}

現在可以嘗試實現文章開頭布局效果。

<div class="con">
  <aside>
    <div class="resize"></div>
    <div class="line"></div>
    <section>SIDE</section>
  </aside>
  <main>
    <div class="main">
      MAIN
    </div>
    <footer>
      <div class="resize resize-top"></div>
      <div class="line"></div>
      <section>bottom</section>
    </footer>
  </main>
</div>