javascript - 修复高度增加时的 div 底部面板

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

底部面板运行良好(停留在其容器的底部)但是我在容器内有一个 TreeView ，当树展开时容器高度增加，滚动时，我的底部面板保持原样并且不会将其位置调整到容器的底部。

有什么解决办法吗？

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>

试试这个。