ボックス化/フレーム化レイアウトの作成

Question

ボックス化されたレイアウトを作成したいと思います。ここでボックス化/フレームはそのまま残り、コンテンツはその中でスクロールします。しかし、私はそのパネル上にパネルスクロールバーを持っている旧式のスクロールフレームメソッドを使用したくありません。

私はこれに似た何かを達成したいと思っています>https://pixelgrade.com/demos/themes/?product=border - この目的のために、コンテンツを無視しますが、白いフレーム/枠がそのまま残っていることがわかります。ウィンドウにはフレーム自体ではなく標準のスクロールバーがあります。

私はリンクスティッキーキットを使用する必要があるかもしれないと思いますが、これは赤ちゃんの場合は謝罪します。

誰でも私の検索を開始するための正しい方向に向けることができます。あなたが尋ねる前に、私は自分自身を調べようとしました:)

Answer 1

私が考えることができる最も単純なことは、あなたのボックスの境界線を作成するために端に沿って固定divを使用することです。

.container { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
} 
 
.content { 
 
    height: 1000px; 
 
    background-color: lightblue; 
 
    padding: 50px; 
 
} 
 
.top { 
 
    background-color: white; 
 
    height: 40px; 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0; 
 
} 
 
.left { 
 
    background-color: white; 
 
    width: 40px; 
 
    position: fixed; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
} 
 
.right { 
 
    background-color: white; 
 
    width: 40px; 
 
    position: fixed; 
 
    height: 100%; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
} 
 
.bottom { 
 
    background-color: white; 
 
    height: 40px; 
 
    position: fixed; 
 
    width: 100%; 
 
    bottom: 0; 
 
}

<section class="container"> 
 
    <section class="content"> 
 
    this is my content... 
 
    </section> 
 
    <div class="top"></div> 
 
    <div class="left"></div> 
 
    <div class="right"></div> 
 
    <div class="bottom"></div> 
 
</section>

ここで境界は、（背景画像を表示するために）透明であることを可能にする別の解決策です。内部ハッシュのスクロールバーを単に隠すハックです。この代替方法を使用することを選択した場合は、表示されるスクロールバーがないため、ページに多くのコンテンツがあることを確認することを強くお勧めします。

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG'); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-size: cover; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.wrapper { 
 
    position: absolute; 
 
    top: 40px; 
 
    bottom: 40px; 
 
    left: 40px; 
 
    right: 40px; 
 
    background-color: lightblue; 
 
    overflow: hidden; 
 
} 
 

 
.wrapper2 { 
 
    overflow-y: scroll; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin-right: -20px; 
 
    padding: 20px; 
 
} 
 

 
.content { 
 
    height: 1000px; 
 
}

<div class="container"> 
 
    <div class="wrapper"> 
 
    <div class="wrapper2"> 
 
     <div class="content"> 
 
     This is my content... 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>