Question

请查看以下代码

https://jsfiddle.net/kamrant/qku5cp1w/1/

#wrapper {
    position: relative;
    border: 1px solid gray;
    height: 100%
}

#panel {
    height: 35px;
    width: 100%;
    position: absolute;
    background: #EEEEEE;
    bottom: 0;
}

底部面板行为正常（停留在容器的底部）但是我在容器内部有一个树形视图，当树展开时，容器高度增加，滚动时，我的底部面板保持原位并且不会将其位置调整到容器的底部。

对此有何解决方案？

Answer 1

#main {
  width: 400px;
  float: left;
}

#container {
  width: 400px;
  float: left;
  position: relative;
}

#wrapper {
   width: 400px;
   float: left;
   position: relative;
   border: 1px solid gray;
   height: 100%;
   min-height: 600px;
   padding: 0 0 35px 0;
}

#panel {
   height: 35px;
   width: 100%;
   position: absolute;
   background: #EEEEEE;
   bottom: 1px;
   left: 1px;
}

#otherstuff {
  height: 100px;
  width: 400px;
  background: gray;
  margin-top: 10px;
  float: left;
}

<div id="main">

  <div id="container">
    <div id="wrapper">

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum ligula id neque laoreet lobortis. Nam laoreet ligula nec sapien finibus, interdum efficitur odio sollicitudin. Vivamus vitae erat nibh. Curabitur non magna quis sapien elementum porttitor vel et nulla. Nunc ultricies nisi quis eros ullamcorper, vitae malesuada velit venenatis. Suspendisse ultricies justo non ipsum pellentesque, eu consectetur massa ultricies. Morbi vel euismod erat, in condimentum elit. Aenean blandit mi ut nulla convallis, nec pellentesque mi facilisis. Sed vitae viverra mi, eu dapibus magna. Sed sollicitudin, velit sit amet tristique placerat, ante massa semper mi, id ultrices elit libero sit amet velit. Vivamus vitae lorem pretium nulla iaculis aliquet. Duis elementum erat vel pretium viverra. Phasellus ac ante quis tortor sollicitudin tristique. Ut tellus sem, congue sed arcu nec, venenatis efficitur risus. Curabitur ullamcorper viverra sapien ut maximus. Quisque ac elit finibus, fringilla diam ac, fermentum sapien.<br /><br />

Donec mattis sapien quis risus dictum aliquet. Etiam tristique tristique ex ut pharetra. Nulla vehicula tempor mauris ac ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu varius dui. Curabitur ornare nibh hendrerit eros lacinia semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean turpis dolor, posuere sit amet sapien quis, luctus viverra leo. Vivamus auctor, lorem et tempus fermentum, lorem velit ultrices nisi, ac bibendum felis ante vel erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet vitae mauris nec fermentum. asd
    </div>
    <div id="panel">do stuff</div>
  </div>
  <div id="otherstuff"></div>

</div>

试试这个。

Answer 2

您已将容器的高度设置为600px（我将其更改为100以便于在jsfiddle上查看），这限制了增长。最好使用min-height，允许div高度随着内容的增长而增长。

我建议将内容放在自己的div中，所以我创建了一个新的div（“tree”）来包含你正在谈论的树视图。这允许你将来只针对这个div的内容，如果它到了。

当你有一个绝对位置时，它会占用它所属的div所在的空间，因此.tree css中的额外填充允许该内容不与“tree”div重叠。 / p>

#container {
    min-height: 100px;
    width: 400px;
}

请参阅jsfiddle以获取完整代码https://jsfiddle.net/jennift/qku5cp1w/4/

当高度增加时固定div底部面板

2 个答案: