ページの一番下のdivを作る方法は、訪問者はそれにスクロールできません？

Question

私は、ページの下部にとどまってそこに目に見えないdivを作成しようとしています。つまり、あなたはそれにスクロールできません。私はそれをgoogleにしようとしましたが、私はそれを作ることができません。マイナスボトムマージンもマイナスボトムも相対/絶対的なポジショニングもできませんでした... あなたの誰かが私を助けてくれますか？

私のサイトのスニペットです。私は「メニュー」画像を下部（表示領域外）に見えないようにしたいので、必要に応じてスライドさせることができます。あなたがこれを行うことができるかもしれない

body { 
 
    overflow-x: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.main-container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: #780d0d; 
 
    position: absolute; 
 
} 
 
.mainmenu { 
 
    width: 70vw; 
 
    height: 82vh; 
 
    position: relative; 
 
    top: 8vh; 
 
    left: 15vw; 
 
    -webkit-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75); 
 
    -moz-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75); 
 
    box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75); 
 
} 
 
.menu-bottom { 
 
    height: 20%; 
 
    width: 33.2%; 
 
    background-color: red; 
 
    border: 1px solid; 
 
    display: inline-block; 
 
    margin: 0 -5px 0 0; 
 
} 
 
.menu-side-holder { 
 
    height: 80%; 
 
    width: 30%; 
 
    display: inline-block; 
 
} 
 
.menu-side { 
 
    height: 50%; 
 
    background-color: red; 
 
    border: 1px solid; 
 
    display: block; 
 
    margin: 0; 
 
    vertical-align: top; 
 
} 
 
#menu-img { 
 
    height: 80%; 
 
    width: 40%; 
 
    display: inline-block; 
 
    margin: 0 -4px; 
 
    vertical-align: top; 
 
    clear: none; 
 
} 
 
.menu-bottom-slider { 
 
    display: inline-block; 
 
    width: 100%; 
 
    background-color: green; 
 
} 
 
#slider { 
 
    position: absolute; 
 
    padding-left: 43.5%; 
 
    bottom: 0; 
 
    margin-bottom: -30vh; 
 
}

<div class="main-container"> 
 
    <div class="mainmenu"> 
 
    <div class="menu-side-holder"> 
 
     <div class="menu-side" id="ogloszenia"> 
 
     1 
 
     </div> 
 
     <div class="menu-side"> 
 
     3 
 
     </div> 
 
    </div> 
 
    <img id="menu-img" src="img/main4.jpg"> 
 
    <div class="menu-side-holder"> 
 
     <div class="menu-side"> 
 
     3 
 
     </div> 
 
     <div class="menu-side"> 
 
     4 
 
     </div> 
 
    </div> 
 
    <div class="menu-bottom"> 
 
     5 
 
    </div> 
 
    <div class="menu-bottom"> 
 
     6 
 
    </div> 
 
    <div class="menu-bottom"> 
 
     7 
 
    </div> 
 
    <div class="menu-bottom-slider"> 
 
     <img id="slider" src="http://s32.postimg.org/xrrmzmohx/slider.png"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

一つの方法は、それが絶対的な作りであり、それにそう

.menu-bottom-slider{ 
    position: absolute; 
    bottom: -(height of element goes here)px 
} 

Answer 2

場所のような要素の高さに等しい負の下を与えますあなたのターゲットdivをbodyの直接の子として（他のdiv内にネストされていない）、このスタイルを使用してください：

position:absolute; 
bottom:-100% // or fixed size if height is known 

Answer 3

は、なぜあなたは、あなたがページ上でそれを必要とする要素と位置を上

opacity: 0

を入れないでください。次に、それを使用するには、jQueryを使用して不透明度を変更し、アニメーション化します。

Answer 4

これはdivセクションのCSSになります。

#divname { 
    position:fixed; 
    height:50px; 
    background-color:red; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    margin-bottom:0px; 
} 

あなたの体はこのようになります。

**body{ 
    margin-bottom:50px; 
}** 

Answer 5

あなたのコードはほとんど働いているが、あなたはoverflow-xを使用している、とあなたはoverflow-yを必要としています。

EDIT：

別の方法fixedに、スライダーの位置を設定することです。

body { 
 
    overflow-x: hidden; /* you could also change this to overflow-y */ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.main-container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: #780d0d; 
 
    position: absolute; 
 
} 
 
.mainmenu { 
 
    width: 70vw; 
 
    height: 82vh; 
 
    position: relative; 
 
    top: 8vh; 
 
    left: 15vw; 
 
    -webkit-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75); 
 
    -moz-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75); 
 
    box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75); 
 
} 
 
.menu-bottom { 
 
    height: 20%; 
 
    width: 33.2%; 
 
    background-color: red; 
 
    border: 1px solid; 
 
    display: inline-block; 
 
    margin: 0 -5px 0 0; 
 
} 
 
.menu-side-holder { 
 
    height: 80%; 
 
    width: 30%; 
 
    display: inline-block; 
 
} 
 
.menu-side { 
 
    height: 50%; 
 
    background-color: red; 
 
    border: 1px solid; 
 
    display: block; 
 
    margin: 0; 
 
    vertical-align: top; 
 
} 
 
#menu-img { 
 
    height: 80%; 
 
    width: 40%; 
 
    display: inline-block; 
 
    margin: 0 -4px; 
 
    vertical-align: top; 
 
    clear: none; 
 
} 
 
.menu-bottom-slider { 
 
    display: inline-block; 
 
    width: 100%; 
 
    background-color: green; 
 
} 
 
#slider { 
 
    position: fixed; /* This fixes the slider, you can't scroll to it! */ 
 
    padding-left: 43.5%; 
 
    bottom: 0; 
 
    margin-bottom: -30vh; 
 
}

<div class="main-container"> 
 
    <div class="mainmenu"> 
 
    <div class="menu-side-holder"> 
 
     <div class="menu-side" id="ogloszenia"> 
 
     1 
 
     </div> 
 
     <div class="menu-side"> 
 
     3 
 
     </div> 
 
    </div> 
 
    <img id="menu-img" src="img/main4.jpg"> 
 
    <div class="menu-side-holder"> 
 
     <div class="menu-side"> 
 
     3 
 
     </div> 
 
     <div class="menu-side"> 
 
     4 
 
     </div> 
 
    </div> 
 
    <div class="menu-bottom"> 
 
     5 
 
    </div> 
 
    <div class="menu-bottom"> 
 
     6 
 
    </div> 
 
    <div class="menu-bottom"> 
 
     7 
 
    </div> 
 
    <div class="menu-bottom-slider"> 
 
     <img id="slider" src="http://s32.postimg.org/xrrmzmohx/slider.png"> 
 
    </div> 
 
    </div> 
 
</div>