Question

我正在尝试将我的fixedDiv修复到底部的Content div中，但是当我尝试固定位置和底部为0px时，fixedDiv将移动到整个底部。

注意 - 所有div的高度都是动态的，因此绝对不起作用。任何解决方案都将不胜感激。

我的HTML代码 -

 <!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class = "completeBody">
      <div class = "header">
      </div>
      <div class = "content">
        <div class = "content1">
        </div>
        <div class = "content2">
        </div>
        <div class = "content3">
        </div>
        <div class = "fixedDiv">
          This should be fixed to bottom of Content Div.
          Note height of all divs are dynamic in %tage.
        </div>
      </div>
      <div class = "footer">
      </div>
    </div>
  </body>

</html>

CSS代码 -

/* Styles go here */

.completeBody
{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}
.header
{
  height: 10%;
  width: 100%;
  background-color: red;
}
.content
{
  height: 80%;
  margin: 20px;
  background-color: #efefef;
  border: 2px solid black;
  overflow: auto;
}
.footer
{
  height: 10%;
  width: 100%;
  background-color: green;
}
.fixedDiv
{
  position:fixed;
  bottom: 0px;
  background-color:yellow;
}
.content1
{
  height:250px;
  background-color: #303030 ;
}
.content2
{
  height:250px;
  background-color: #909090 ;
}
.content3
{
  height:250px;
  background-color: #D0D0D0 ;
}

以下是Plunker的链接 - https://plnkr.co/edit/SEQ0Yur2Ybamcnu7dydz?p=preview

Answer 1

我不建议进行相对/绝对定位，您的问题可以通过以下方式轻松解决：

.content
{
  box-sizing:border-box;
  height: 80%;
  padding: 20px;
  background-color: #efefef;
  border: 2px solid black;
  overflow: auto;
}

box-sizing:border-box;使元素不会超出定义的高度/宽度。

padding: 20px;每当您应用margin时，对象将独立于框大小而增长，因此在您的情况下，最好应用填充。

Answer 2

好的，因为没有人正确回答这里是一个简单/正确的方法：

将您的“底部固定”元素放置在position:absolute; bottom:0;但不在可滚动元素中，而不是在其父包装中：

快速示例：

#wrapper{
  position:relative;
  border: 2px solid red;
}
#scrollable{
  height:100px;
  overflow: auto;
}
#bottomFixed{
  position:absolute;
  bottom: 0;
}

<div id="wrapper">
  <div id="scrollable"><p style="height:500px;">Long scrollable content...</p></div>  
  <div id="bottomFixed">Yey! I'm parent- fixed!!</div>
</div>

Answer 3

我尝试使用你的代码，一旦我删除了位置：修复了FixedDiv进入内容div并进入底部。

我所做的就是：

.fixedDiv
{
  bottom: 0px;
  background-color:yellow;
}

Answer 4

如果你想要div的一部分滚动而另一部分不滚动，那么你必须在你的主div中创建两个单独的div。我已经编辑了您的代码并进行了更正。希望这会有所帮助：）

.content
{
  height: 80%;
  margin: 20px;
  background-color: #efefef;
  border: 2px solid black;
  overflow: none;
}
.content-main{
  overflow: auto;
  height: 50%;
}

.content-second{
  overflow: none;
  height: 50%;
}
 <div class = "content">
    <div class="content-main">
      <div class = "content1">
      </div>
      <div class = "content2">
        content2
      </div>
      <div class = "content3">
        content3
      </div>
    </div>
    <div class="content-second">
      <div class = "fixedDiv">
        This should be fixed to bottom of Content Div.
        Note height of all divs are dynamic in %tage.
      </div>
    </div>
  </div>

Here is the plunker

Answer 5

试一试！

.content{
    height: 80%;
    margin: 20px;
    background-color: #efefef;
    border: 2px solid black;
    overflow: auto;
}
.fixedDiv{
    float: left; // or this
    background-color:yellow;
}

你可以使用float: left;，它会坚持到底！：）

此方法也适用于所有版本的 Chrome ， Safari ， Firefox 和 Edge / < strong> IE 7 ^， Opera 4 ^等。

如何从嵌套div中删除滚动

5 个答案: