如何使div停留在頁面底部，因此訪問者無法滾動到該頁面？

Question

我試圖創建一個停留在頁面底部的div，並且在那裏不可見。我的意思是，你不能滾動到它。我試圖谷歌它，但我不能做到這一點，既沒有負底邊，也沒有負底，也沒有相對/絕對定位不能使它... 請問你們誰能幫助我嗎？

這是我的網站片段 - 我希望「菜單」圖像在底部（顯示區域外部）不可見，因此可以在需要時滑動。你也許可以做到這一點

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爲身體的直接子（不嵌套在其他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。

編輯：

的另一種方法是將滑塊的位置設置爲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>