定格底部面板時高度增加

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（爲了更容易在jsfiddle上查看，我將其更改爲100），這限制了增長。將更好地使用最小高度，允許div高度隨內容增長而增長。

我建議把內容放在它自己的div中，所以我做了一個新的div（「樹」）來包含你所說的樹視圖。這可以讓你在未來的目標只是這個div的內容，如果它來的話。

當你有一個絕對位置時，它將佔據它所屬div的內部空間，因此在.tree css內部會有額外的填充以允許該內容不與「樹」div重疊。

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

見的jsfiddle爲完整的代碼https://jsfiddle.net/jennift/qku5cp1w/4/