고정 div 아래에있는 HTML/CSS/JS 내용 스크롤 막대

안녕하세요 제 질문은 누군가 내 바닥 글에서 내 콘텐츠의 스크롤 막대가되도록 도와 줄 수 있습니까?고정 div 아래에있는 HTML/CSS/JS 내용 스크롤 막대

그리고 여기에 코드 스 니펫

HTML :

<body> 
    <div class="major"> 
     <div class="torso"> 
     <div id="gallery"> 
     </div> 
     <div class="bone"> 
      <div class="aero"> 
       Menu 
      </div> 
      <div class="magneticaero"> 
       <a href="index.html" class="geo"> 
        <div class="chest"> 
         <div class="flaticon-house158"> 
         </div> 
        </div> 
       </a> 
      </div> 
     </div> 
    </div> 
</body>

CSS :

html,head,body,p,div,a,ul,h2{ 
margin: 0; 
padding: 0; 
font-family: sans-serif,Century Gothic,CenturyGothic,AppleGothic; 
text-decoration: none;} 

.major{ 
max-width: 100%; 
max-height: 100%; 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
position: fixed;} 

.torso{ 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
overflow-y: scroll;} 

.bone{ 
width: 100%; 
height: 70px; 
margin: 0; 
padding: 0; 
bottom: 0; 
position: fixed; 
background-color: #C2C2C2; 
text-align: center; 
transition: 1s;} 

.aero{ 
width: 100%; 
height: 40px; 
box-shadow: 0 0 1px #FFF; 
padding-top: 15px; 
padding-bottom: 15px; 
font-size: 30px; 
font-weight: bold; 
color: #FFF;} 

.magneticareo{ 
width: 100%; 
height: 360px;} 

.chest{ 
width: 25%; 
height: 350px; 
box-shadow: 0 0 1px #FFF; 
float: left; 
font-size: 25px; 
font-weight: bold; 
color: #FFF;} 

.boneup{ 
height: 350px;} 

.photo{ 
width: 100%; 
height: auto; 
padding: 0; 
margin: 0;} 

.order{ 
width: 20%; 
height: auto; 
padding: 0; 
margin: 0; 
float: left;}

The solution i search

나는 누군가가,

출처

2017-02-09 Tim Eberhard

정확히 달성하기 위해 무엇을하려고합니까? –

첫 번째 그림에서 바닥 글 위로 스크롤 막대가되는 것을 시도합니다. 화살표가 표시되어 있으며 화살표가 가리키는 곳에 스크롤 막대가 있어야합니다. 문법 오류로 인해 유감스럽게 생각합니다. 당신이 모든 것을 이해하기를 바랍니다. –

@SorangwalaAbbasali 어쩌면 내 문제를 이해하는 데 도움이되는 마지막 사진을 추가했습니다. 나는 그것이 그림과 같이 보이길 바란다. –

이 다른 모든 요소의 .aero OUT을 가지고 :-) 팀을 도와 직접 </body> 위 아래로 움직일 수있을 때 정말 감사하고, bottom: 0

I과 그것을 고정 된 위치를 줘야 할 것 또한, .major의 높이를 calc(100% - 40px)으로 설정하십시오. 즉, 창에서 높이를 뺀 높이 인 .aero으로 설정하십시오. (그리고 정말로 단지 그것을 40px 높은 수 있도록하는 데에 box-sizing: border-box을 사용합니다.) 웹 사이트를보고 난 후에

ADDITION : height: calc(100% - 70px);.torso-gallery에 할당 -이 제가 위에서 설명 된 것과 동일한 효과를 가지고 있으며, 당신은 더 이상 당신의 HTML 구조를 변경할 필요가 없습니다.

출처

2017-02-09 16:20:20 Johannes

슬프게도 나를 위해 일한 스크롤바는 여전히 잘못된 장소에 있습니다 –

우리는 그것을 볼 수있는 서버에 해당 사이트가 있습니까? – Johannes

테스트 사이트에 모든 것을 업로드했습니다 : https://profiletestsite.000webhostapp.com/gallery.html –

고정 div 아래에있는 HTML/CSS/JS 내용 스크롤 막대

답변

관련 문제