2017-02-09 6 views
0

こんにちは私の質問は誰かが私のコンテンツのスクロールバーになるのを手伝ってくれますか?固定div内のHTML/CSS/JSコンテンツスクロールバー

How it looks on the browser

そしてここでのコードスニペット

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

誰かがティム

:-)私を助けることができるとき、私は本当に感謝するだろう
+0

あなたは何を達成しようとしていますか? –

+0

私は矢印を参照して最初の画像のフッター上にスクロールバーになるようにしようとすると、私はスクロールバーがそこに矢印が指していることをしたい。文法の不具合で申し訳ありませんが、あなたがすべてを理解してくれることを願っています。 –

+0

@SorangwalaAbbasali私はおそらく私の問題を理解するのに役立つ最後の新しい画像を追加しました。私はそれが写真のように見えるようにしたい。 –

答えて

0

は、他のすべての要素のうち.aeroを取り、直接</body>の上にそれを下に移動し、bottom: 0

とそれに固定された位置を与えるIさらに、.majorの高さをcalc(100% - 40px)に設定します。つまり、ウィンドウの高さから高さを引いて、高さを.aeroに設定します。 (そして、実際にはそれが40ピクセル、高作ってそれにbox-sizing: border-boxを使用しています。)のウェブサイトを見た後

ADDITION:height: calc(100% - 70px);.torso-galleryに割り当てる - これは私が上で説明したのと同じ効果を持って、あなたはもうあなたのHTMLの構造を変更する必要はありません。

+0

悲しいことに、スクロールバーがまだ間違った場所にいるのは私のために働いていませんでした –

+0

私たちが見ることができるサーバーにそのサイトがありますか? – Johannes

+0

テストサイトにすべてをアップロードしました:https://profiletestsite.000webhostapp.com/gallery.html –

関連する問題