Question

我试图创建一个位于页面底部并且在那里不可见的div。我的意思是，你无法滚动到它。我试图谷歌，但我无法做到这一点，既没有负底线，也没有负底线，也没有相对/绝对定位无法做到...... 你们有人可以帮助我吗？

这是我网站的一小部分 - 我想＆＃34;菜单＆＃34;图像在底部（显示区域外）不可见，因此可以在需要时向上滑动。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

将目标div作为正文的直接子项（不嵌套在其他div中）并使用此样式：

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

Answer 2

你可以做到这一点的一种方法是将其设为绝对值，并给它一个等于元素高度的负底部，如此

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

Answer 3

为什么不放

ngInfiniteScroll

在元素上并将其放置在页面上您需要的位置。然后，当您想要使用它时，使用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。这意味着该位置不依赖于滚动位置，因此您无法滚动到该位置：

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

如何让div保持在页面底部，以便访问者可以滚动到它？

5 个答案: