創建盒裝/框架式布局

Question

我想創建一個盒裝版式，其中盒裝/框架保留在原處，內容在其中滾動。 但是，我不想使用老式的滾動框架方法，因為該面板上有一個面板滾動條。

我想實現類似於此的功能> https://pixelgrade.com/demos/themes/?product=border-為此，請忽略內容，但是您會看到留在原處的白色框/邊框-即我想要的是。 窗口具有標准的滾動條，而不是框架本身。

我想我可能需要使用sticky-kit.js鏈接，但是如果這是一個紅色鯡魚，則表示歉意。

誰能為我的搜索工作指明正確的方向。 在您問之前，我已經嘗試過自己研究一下：)

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> 

這是允許邊界透明（以顯示背景圖像）的替代解決方案。 這是一個小技巧，只是隱藏了內部div的滾動條。 我強烈建議您選擇使用此替代方法，以確保頁面上顯然有更多內容，因為將沒有可見的滾動條。

 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>