垂直方向のサイズを変更できる固定サイドバー

私はブートストラップのウェブサイトを作成しています。私はボディ、サイドバー、コンテンツに2つのdivを持っています。私は右のコンテンツのdivを持っている高さは、divのコンテンツの量に依存しています。私は画面のサイズの100％の高さで固定する必要がある左側のサイドバーdivを持っています。したがって、コンテンツdivでスクロールすると、サイドバーdivは移動しません。垂直方向のサイズを変更できる固定サイドバー

スプリッタを水平方向にドラッグするときに両方のdivの幅を変更できるようにするには、2つのdivの間に分割ハンドラを追加する方法はありますか？

position: fixedをサイドバーdivに割り当てると問題が発生します。

私はあなたがこのような何かを探しているのだと思い

<body> 
    <div class="sidebar"></div> 
    <div class="splitter"></div> 
    <div class="content"></div> 
</body>

出典

2017-12-20 pgallo

「position：fixed;」の問題についてもっと詳しく説明できますか？ – brian17han

：私も私を許可する2つのdivの間で分割されたハンドラを必要とする部分については

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow-x: hidden; 
 
} 
 

 
.left { 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 250px; 
 
    
 
    /* for testing*/ 
 
    background-color: green; 
 
    color: white; 
 
    padding: 10px; 
 
} 
 

 
.right { 
 
    position: absolute; 
 
    left: 250px; 
 
    width: 100%; 
 
    
 
    /* for testing*/ 
 
    background-color: blue; 
 
    color: white; 
 
    padding: 10px; 
 
}

<div class="left">test</div> 
 

 
<div class="right"> 
 
    START!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br 
 
    /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello 
 
    World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br 
 
    /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> END! 
 
    <br /> 
 
</div>

」スプリッタを水平方向にドラッグするときに両方のdivの幅をリサイズすることができます。あなたはそれを別々にドラッグすることができますか、単に反応性を望んでいますか？

出典

2017-12-20 22:05:56

2つのdivを左右に（水平に）区切る垂直の境界線をドラッグできるようにしたいと思います。両方のdivの幅は、垂直方向の境界線をドラッグする方向に応じて小さくまたは大きくなるように変化します。 – pgallo

垂直方向のサイズを変更できる固定サイドバー

答えて

関連する問題