박스형/프레임 레이아웃

Question

나는 박스/프레임이 제자리에 유지 박스형 레이아웃, 그 안에 내용 스크롤을 만들 싶습니다

만들기. 그러나 난 그 패널에 패널 스크롤 막대가있는 구식 스크롤 프레임 방법을 사용하고 싶지 않습니다.

이와 비슷한 내용을 달성하고 싶습니다.>https://pixelgrade.com/demos/themes/?product=border -이 목적으로 콘텐츠를 무시하지만 원하는대로 흰색 프레임/테두리를 볼 수 있습니다. 그리고 창에는 프레임 자체가 아닌 표준 스크롤 막대가 있습니다.

나는 빨간 쐐기 인 경우 무언가 link 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>