下：當溢出-Y出現

請看看我的jsfiddle http://jsfiddle.net/LY8ze/1/下：當溢出-Y出現

在我的div 0不工作有內容和頁腳。 （2部分）頁腳必須留在bottom:0。

滾動條未出現時。頁腳顯示正確。但是當滾動條出現時，頁腳不會停留在底部。作爲第一個數字，你可以在我的jsFiddle中看到它。

我該如何解決這個問題，只使用CSS和HTML？

來源

2013-06-24 OammieR

你正在尋找的是位置固定的，但它會在你的情況下失敗了怎麼辦，你需要使用jQuery這一點，否則，你可以通過使用一個容器元素惡搞它而不是改變標記相應

Demo

甚至一個better solution（同時適用於，第1和第2的情況下）

1. 
<div class="wrap"> 
<div class="container"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae risus. 
     <br /> 
     <img src="http://i.imgur.com/RKA1Kkk.jpg" style="width:250px;height:150px" /> 
</div> 
    <div class="footer"> 
     Author : OammieR 
    </div> 
</div>

CSS

.container { 
    height: 250px; 
    overflow-y: auto; 
    position: relative; 
    width: 300px; 
    word-wrap: break-word; 
    margin:10px; 
    padding:5px; 
    background-color:#C1C2C3; 
} 

.wrap { 
    background: #c1c2c3; 
    width: 330px; 

} 

.footer { 
    color:red; 
    padding-left: 15px; 
    padding-bottom: 10px; 
}

來源

2013-06-24 08:24:05

謝謝。但在2號（在jsFiddle）不起作用。 – OammieR

@OammieR如果是這樣的話，我會告訴你另一種方式等待.. –

@OammieR檢查[this]（http://jsfiddle.net/LY8ze/3/）out –

用途： -

.footer { 
    bottom: 0; 
    position: relative; // changed from absolute to relative 
    color:red; 
}

來源

2013-06-24 08:21:27

怎麼樣在含量較少情況下，第2節？ – Nitesh

謝謝。但在第二個數字中並不如此。 – OammieR

可我一定試試這個：

CSS

.container { 
    background-color: #C1C2C3; 
    margin: 10px; 
    min-height: 250px; 
    overflow-y: auto; 
    padding: 5px; 
    position: relative; 
    width: 300px; 
    word-wrap: break-word; 
}

來源

2013-06-24 08:24:37 falguni

滾動條消失了。 – Nitesh

謝謝。但不工作。 div的高度必須限制在250px; – OammieR

下：當溢出-Y出現

回答

相關問題