如何讓div粘到底部溢出：auto parent div？

將div粘貼到父div底部的常見問題上略有扭曲。在這種情況下，即使在父窗口滾動時，我也希望阻止的div保持停留狀態，並且位於滾動下方的文本頂部。有什麼訣竅？ jsfiddle here：http://jsfiddle.net/forgetcolor/vYjMv/1/。下面的代碼重複：如何讓div粘到底部溢出：auto parent div？

<!doctype html> 
<html> 
    <head> 
    <style type="text/css"> 
     #wrapper { 
     width:300px; 
     height:300px; 
     background-color:#eee; 
     position:relative; 
     overflow:auto; 
     } 

     .bot { 
     border:1px solid #ddd; 
     display:inline; 
     position:absolute; 
     bottom:0; 
     right:0; 
     color:blue; 
     } 

    </style> 
    <title>tst</title> 
    </head> 
    <body> 
    <div id="wrapper"> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tempor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie tortor non nisi accumsan placerat. Morbi elit risus, venenatis et sodales congue, tristique vel ligula. Maecenas convallis arcu turpis. Praesent nibh leo, blandit ut posuere et, aliquet at sapien. Ut placerat, libero id faucibus pellentesque, leo nulla consectetur ligula, quis malesuada sapien nulla id diam. Nullam turpis nisl, malesuada non gravida eu, eleifend et quam. Proin sit amet elit euismod odio tincidunt tempor. Sed eleifend tincidunt blandit. Cras eget sapien odio, a sodales dui. Pellentesque tincidunt varius sagittis. Nullam nisl est, volutpat sed fringilla at, faucibus id mi. Phasellus vel lacus nibh, eget consectetur nulla. Quisque vel elementum nibh. Etiam vitae lectus erat, eu euismod est. 
     </p> 
     <span class="bot">bottom</span> 
    </div> 
    </body> 
</html>

來源

2012-05-12 mix

你需要把另一個新的div寬度相同& warpper的高度，堅持div來它：

檢查：

<!doctype html> 
<html> 
    <head> 
    <style type="text/css"> 
     #fake_wrapper{ 
     width:300px; 
     height:300px; 
     position:relative; 
     overflow:none; 
     } 

     #wrapper { 
     width:300px; 
     height:300px; 
     background-color:#eee; 
     overflow:auto; 
     } 

     .bot { 
     border:1px solid #ddd; 
     display:block; 
     position:absolute; 
     bottom:0px; 
     right:15px; 
     color:blue; 
     } 

    </style> 
    <title>tst</title> 
    </head> 
    <body> 
    <div id="fake_wrapper"> 
    <div id="wrapper"> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tempor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie tortor non nisi accumsan placerat. Morbi elit risus, venenatis et sodales congue, tristique vel ligula. Maecenas convallis arcu turpis. Praesent nibh leo, blandit ut posuere et, aliquet at sapien. Ut placerat, libero id faucibus pellentesque, leo nulla consectetur ligula, quis malesuada sapien nulla id diam. Nullam turpis nisl, malesuada non gravida eu, eleifend et quam. Proin sit amet elit euismod odio tincidunt tempor. Sed eleifend tincidunt blandit. Cras eget sapien odio, a sodales dui. Pellentesque tincidunt varius sagittis. Nullam nisl est, volutpat sed fringilla at, faucibus id mi. Phasellus vel lacus nibh, eget consectetur nulla. Quisque vel elementum nibh. Etiam vitae lectus erat, eu euismod est. 
     </p> 

    </div> 
    <div class="bot">bottom fixed</div> 
    </div> 

    </body> 
</html>

來源

2012-05-12 18:03:41

Check this one。

取得position: fixed的.bot並增加了top和left。

來源

2012-05-12 18:12:23 Libin

如何讓div粘到底部溢出：auto parent div？

回答

相關問題