Question

我想做的事情很简单。我的页面底部有固定的div。它必须始终显示在底部，因此使用固定位置。

在这个div中有2divs，一个小的必须总是在这个固定的div之上，另一个必须是可滚动的。

问题是小div，如果我给他定位，它位于窗口顶部，而不是在这个固定div的顶部，正如你在fiddle

中看到的那样

如果小div是绝对位置，它位于固定div的顶部，但是如果它是滚动的，正如您在fiddle

中看到的那样

HTML

<div class="bottom">
 <div class="top"></div>
 <div class="content"></div>
</div>

CSS

.bottom
{
    padding:20px;
    height: 253px; 
    position: fixed; 
    bottom:0px;
    width:100%;
    background-color: red;
    overflow-x: hidden;
    overflow-y: scroll;
}

.top
{
    height:50px;
    width:100%;
    background-color: yellow;
    position: fixed;
    top: 0px;
}

.content
{
    height: 1500px;
    background: linear-gradient(green, blue);
}

是否可以在不看jvascript滚动的情况下完成这项工作？纯CSS？

Answer 1

您可以对内容使用包装<div>并让它滚动 - 这样绝对定位的兄弟不会随之滚动，如下所示：

HTML

 <div class="bottom">
   <div class="top"></div>
      <div class='contentWrap'>
        <div class="content"></div>
      </div>
 </div>

CSS

.contentWrap{
 height:100%;
 overflow-y:auto;
}

* {
  margin: 0;
  padding: 0;
}
.bottom {
  padding: 20px;
  height: 253px;
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: red;
  overflow: hidden;
}
.top {
  height: 50px;
  width: 100%;
  background-color: yellow;
  position: absolute;
  top: 0px;
}
.contentWrap {
  height: 100%;
  padding-top: 30px; /* .top height - .bottom padding*/
  overflow-y: auto;
}
.content {
  height: 1500px;
  background: linear-gradient(green, blue);
}

<div class="bottom">
  <div class="top"></div>
  <div class='contentWrap'>
    <div class="content"></div>
  </div>
</div>

JSFiddle Demo

Answer 2

您使用固定的方法 - ＆gt;绝对是绝对正确的，因为您可以通过这样做来定位元素绝对但相对于其父元素。问题是绝对.top总是出现在.bottom之上 - 所以如果.bottom滚动，.top将会跟随。

我的解决方案是在.top上使用position:fixed;，但使用bottom而不是top：

.top {
    ....
    position:fixed;
    bottom:253px; /*note sure how it should look at the end, try it yourself*/
 }

Answer 3

在div的{{1}}内添加top div，并从content类中删除top:0：

<强> HTML

.top

<强> CSS

<div class="bottom">  
    <div class="content" >
        <div class="top"></div>
    </div>
<div>

fiddle

Answer 4

试试这个，它基本上只是在你的可滚动div周围放置一个框架容器来保持一切就绪。 JSFiddle

<div class="bottom">
    <div class="top"></div>
    <div class="scroll-container">
        <div class="content" ></div>
    </div>
<div>

.scroll-container 
{
    height: 203px;
    overflow-y: scroll;
}

另外，从overflow-y: scroll;类

中删除.bottom

Answer 5

如果你已经处理了固定的高度和职位，为什么不只是定位＆＃39; top＆＃39;部分也是固定的？检查 Fiddle Demo 像这样：

.top
{
    height:50px;
    bottom:243px;
    width:100%;
    background-color: yellow;
    position: fixed;
}

div总是在固定元素之上

5 个答案: