錨div到底部的另一個div有無溢出

我想將一個div錨定到另一個具有固定高度並溢出的div的底部：滾動應用於它，但前提是沒有溢出。如果div已經溢出，那麼我希望頁腳可以隨流而來。錨div到底部的另一個div有無溢出

目前小提琴我有工作，如果沒有溢出的內容。一旦出現溢出，頁腳重疊內容並從「底部」位置滾動。

HTML：

<table style="table-layout:fixed; width:675px; text-align:left;"> 
    <tr> 
     <td colspan="4" style="height:100%;"> 
      <div class="content"> 
       <div > 
        content<br/>     
       </div> 
       <div class="footer"> 
        foot on the bottom unless overflow then stay within flow 
       </div> 
      </div> 
     </td> 
    </tr> 
</table>

CSS：

.content 
{ 
    width:100%; 
    overflow:scroll; 
    overflow-x:hidden; 
    height:200px; 
    position: relative; 
} 

.footer 
{ 
    height:10px; 
    position:absolute; 
    bottom:10px; 
}

爲了看到這個問題，剪切和粘貼 '內容'，直到它會導致內容溢出。

Fiddle

來源

2013-08-24 David

我不認爲有由於頁腳的定位條件即絕對位置時.content的內部內容是< 200像素相對&正常流量/位置時.content「純CSS溶液內容大於200px。

下面是使用jQuery的解決方案：

$(function(){ 
    var contentHeight = $('.content').height(); 
    var overflowHeight = $('.content > div').height(); 

    if (overflowHeight > contentHeight) { 
     $('.footer').css({ 
      'position': 'relative', 
      'bottom': 0 
     }); 
    } else { 
     $('.footer').css({ 
      'position': 'absolute', 
      'bottom': '10px' 
     }); 
    } 
});

見小提琴這裏：http://jsfiddle.net/YmAgv/

來源

2013-08-25 02:28:35 micjamking

我希望CSS來了遠不足以處理這個，但你的答案的工作。謝謝。 – David

Webkit有一個名爲'position：sticky'的解決方案，但它尚未在任何其他瀏覽器中實現，並且尚未將其應用於HTML/CSS規範。看到這裏：http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit – micjamking

我看到，當我在網上尋找答案，但我想看到如果CSS可以做到這一點。你的解決方案更清潔。 Webkit對於我需要完成的任務來說是過度的。 – David

錨div到底部的另一個div有無溢出

回答

相關問題