ブラウザの非 Webkit ブラウザのスクロールバーはカスタマイズ可能で、サイズ変更領域のサイズはスクロールバーのサイズになります。そのため、ストレッチ領域全体をコンテナと同じ高さにすることができます。 実施原則 CSS には ただし、この伸縮には問題があります。つまり、ドラッグ領域が小さすぎて、右下隅に少しだけあるということです。 このドラッグエリアを大きくする方法はありますか? その後、調査した結果、サイズ変更属性のドラッグ バーとスクロール バーのドラッグ バーは同じシステム内のものであることがわかりました。サイズ変更バーのサイズを間接的に設定するには、スクロール バーをカスタマイズするだけで済みます。 例えば: .resize-bar::-webkit-scrollbar { 幅: 200px; 高さ: 200px; } この時点で、ストレッチ領域は非常に大きくなります。 次に行うことは、このドラッグ領域を列レイアウトの背後に隠し、次に示すように、ドラッグ用に幅の一部を公開することです。 最後に、左列と右列に適応レイアウトを使用することで、目的の効果を実現できます。 こちらをクリックしてください: 列幅の伸縮を実現する純粋な CSS のデモ コードは次のとおりです。 。カラム { オーバーフロー: 非表示; } .列左 { 高さ: 400px; 背景色: #fff; 位置: 相対的; フロート: 左; } .列右 { 高さ: 400px; パディング: 16px; 背景色: #eee; ボックスのサイズ: 境界線ボックス; オーバーフロー: 非表示; } .サイズ変更保存{ 位置: 絶対; 上: 0; 右: 5px; 下: 0; 左: 0; パディング: 16px; オーバーフロー-x:非表示; } .サイズ変更バー{ 幅: 200px; 高さ: 継承; サイズ変更: 水平; カーソル:ew-resize; 不透明度: 0; オーバーフロー: スクロール; } /* 線をドラッグ */ .resize-line { 位置: 絶対; 右: 0; 上: 0; 下: 0; 右境界線: 2px 実線 #eee; 左境界線: 1px 実線 #bbb; ポインタイベント: なし; } .resize-bar:hover ~ .resize-line, .resize-bar:active ~ .resize-line { border-left: 1px 破線の空色; } .resize-bar::-webkit-scrollbar { 幅: 200px; 高さ: 継承; } /*Firefox では下の小さな領域のみを拡大できます*/ @supports (-moz-user-select: none) { .resize-bar:hover ~ .resize-line, .resize-bar:active ~ .resize-line { 左境界線: 1px 実線 #bbb; } .resize-bar:hover ~ .resize-line::after, .resize-bar:active ~ .resize-line::after { コンテンツ: ''; 位置: 絶対; 幅: 16px; 高さ: 16px; 下: 0; 右: -8px; 背景: url(./resize.svg); 背景サイズ: 100% 100%; } } <div class="column"> <div class="column-left"> <div class="resize-bar"></div> <div class="resize-line"></div> <div class="resize-save"> 左側のコンテンツ、左側のコンテンツ、左側のコンテンツ、左側のコンテンツ</div> </div> <div class="column-right"> 右側のコンテンツ、右側のコンテンツ、右側のコンテンツ、右側のコンテンツ</div> </div> ブラウザの非 Webkit ブラウザのスクロールバーはカスタマイズ可能で、サイズ変更領域のサイズはスクロールバーのサイズになります。そのため、ストレッチ領域全体をコンテナと同じ高さにすることができます。 純粋な CSS で左右にドラッグしてレイアウトサイズを変更する方法についての記事はこれで終わりです。CSS で左右にドラッグしてレイアウトサイズを変更する方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: JavaScript のプロトタイプとプロトタイプチェーンの詳細な説明
実験環境: MYSQL 5.7.22バイナリログを有効にするログ形式 MIXED実験プロセス: 1....
目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...
目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...
システムが遅いと感じてソースを変更したい場合は、別の記事で整理しました https://blog.c...
MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...
目次背景データ型を決定する方法は何ですか? 1. typeof を使用して基本データ型を決定します。...
コードサンプルヘッドタグにコード行を追加します: XML/HTML コードコンテンツをクリップボード...
1. 従来のLRUリンクリストについて簡単に説明するLRU:最も最近使われなかったものLRU リンク...
プロジェクトでは、SQL を使用してデータ分析を実行するために、大量のデータをデータベースにインポー...
目次1. JDKをインストールする手動インストール2. トムキャット1. JDKをインストールする注...
目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...
Centos7 のインストール時に VmWare がインターネットにアクセスできない場合はどうすれば...
同僚からよく聞かれるのですが、ファイル/ディレクトリを削除すると「操作は許可されていません」というエ...
目次導入Intel CPUをサポートApple M1のサポートテスト導入このプロジェクトでは最近、P...
0x0 パラメータ検証Nest.jsでは、パラメータ検証業務のほとんどをパイプライン方式で実装してい...