絕對定位李的高度不工作的響應式設計

我需要弄清楚我將如何響應地顯示我的內容。我使用jQuery來滑入和滑出（水平）li項目，因此它們是絕對定位的。但有些項目的文字比其他項目更多，當我改變屏幕大小以模擬移動設備時，絕對定位的li會在頁腳上流血或者在底部截斷。如果我使用最小高度，那麼我必須根據最長的li計算所需的高度。我寧願不這樣做。是否有另一種方式來響應地構建此頁面並使用絕對定位的內容？即使使用jQuery，如果我需要？絕對定位李的高度不工作的響應式設計

<div class="wrapper"> 
<ul class="container"> 
<li>… short copy</li> 
<li>… long copy</li> 
</ul> 
<footer>…</footer> 
</div> 


.wrapper{ 
width:100%; 
} 
.container{ 
width:80%;margin:0 auto;position:relative;max-width:1280px; 
} 
li{ 
position:absolute;width:100%; 
}

來源

2014-02-12 james

不是100％肯定你正在嘗試做的，也許加上'溢出：隱藏; 'to'.container' css – user934902

澄清：當li變得更窄時（例如在480px w設備上），文本更長，並且向下延伸到頁面更多。發生這種情況時，它與下面的內容（以及它的容器）重疊，或者如果長於視口，則會被切斷。合理？ – james

我現在明白了，讓我考慮一下 – user934902

您可以使用媒體查詢來控制基於屏幕寬度包裝的最小高度：

@media (max-width: 480px) { 
    .wrapper { 
    min-height: 600px; 
    } 
}

來源

2014-02-13 06:46:28

是的，這會有所幫助。我正在尋找一種不必處理設置最小高度的方法，但我可能不得不爲此解決，以便我的內容不會太差。謝謝。 – james

我不認爲有一種方法使用純CSS，如果你想包裝絕對定位。正常的流程無法知道包裝正在做什麼。如果答案有幫助，我們將讚賞贊成！謝謝。 –

謝謝。包裝不是絕對定位的。我只有李的絕對位置。我很樂意爲你提供支持，但看起來我還沒有這個功能。 – james

絕對定位李的高度不工作的響應式設計

回答

相關問題