絕對div重疊調整大小，css解決方案或只與Javascript？

試圖用CSS只修復（如果可能的話）重疊絕對定位div在側欄中的固定div的底部。雖然這將有可能檢測到這一點，並修改javascript的絕對div的位置，我想知道是否有一個更簡單的CSS唯一的解決方案。我嘗試添加底部元件到固定父的高度的填料，但是它保持在調整大小（垂直方向）重疊它 - 因此如何防止重疊的情況下，無序列表（1）的窗口的底部元件（2）名單太長。絕對div重疊調整大小，css解決方案或只與Javascript？

HTML：

<div id="sidebar"> 
    <ul> 
     <li>list item</li> 
     <li>list item</li> 
     <li>list item</li> 
     ...  
    </ul> 
    <div id="bottom_element"> 
     <p>I am a bottom element</p> 
    </div> 
</div>

CSS：

#sidebar { 
    position: fixed; 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: 200px; 
    background: #ddd; 
    padding: 1em; 
    padding-bottom: 100px; 
} 

#bottom_element { 
    position: absolute; 
    bottom:0; 
    left: 0; 
    width: 100%; 
    background: #000; 
    color: #fff; 
    padding: 1em; 
} 

#sidebar > ul { 
    height: 100%; 
    overflow-y: auto; 
    padding-bottom: 1em; 
}

的代碼的一個例子：jsfiddle。更新代碼使用jQuery：fiddle 非常感謝您的任何幫助。

來源

2015-11-11 asturnick

你在哪裏希望它是什麼？我看看html/css，它看起來像是css告訴它的行爲。那麼預期的結果是什麼？ – CleverNode

你能解釋一下目前的行爲與你想要發生的不同嗎？ – Michael

那麼，怎麼了？ –

這裏是方式，可以幫助你繼續前進，這裏的「底」元素總是停留在底部時，UL名單有幾個項目，並在許多項目，然後底部元素被替代推重疊的名單下來。

*, *:before, *.after { 
 
    box-sizing: border-box; 
 
} 
 

 
#sidebar { 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 200px; 
 
    background: #ddd; 
 
    overflow: auto; 
 
} 
 

 
.wrapper { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.page-row { 
 
    display: table-row; 
 
    height: 0; 
 
} 
 
.page-row-expanded { 
 
    height: 100%; 
 
} 
 

 
.bottom div { 
 
    background-color: #bbb; 
 
    padding: 15px; 
 
}

<div id="sidebar"> 
 
    <div class="wrapper"> 
 
    <div class="page-row page-row-expanded"> 
 
     <div> 
 
     <ul> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> 
 
      <li>list item</li> \t \t \t 
 
     </ul> 
 
     </div> 
 
    </div> 
 

 
    <div class="bottom page-row"> 
 
     <div> 
 
     Bottom element 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-11-11 18:35:41 LGSon

謝謝@LGSon，不幸的是這或多或少是我在開始時所做的;由底部元素重疊的ul。我真的試圖實現的是，因爲它在我的問題中看起來更新的小提琴，但沒有JavaScript，因爲我希望只有一個CSS的解決方案。 – asturnick

你想要底部的元素被推下instaad停留，並有側邊欄滾動？ – LGSon

正確，只有當側邊欄不與ul重疊時，纔將底部固定在底部。 – asturnick

我也有類似的問題，並且，看了這個（和其他職位），我用這個解決方案...

// divid is the ID of the element with position: absolute 
function SetHeight(divid) { 
    var divh = $("#"+divid).height(); 
// 36 is the maximum height before overlay occurs 
    if (divh > 36) { 
    $("#"+divid).css("position", "relative"); 
    } 
}

我希望這是一些使用給他人。這是我的第一篇文章，如果我錯了，請原諒。

來源

2016-01-27 15:59:37

絕對div重疊調整大小，css解決方案或只與Javascript？

回答

相關問題