改變窗口寬度時在屏幕外推動一個元素

Question

我有絕對位於屏幕左側的方形div。在達到某個視口寬度後，我怎樣才能不斷向左推它？我唯一的想法是通過javascript添加resize事件監聽器，並計算left元素的屬性爲負值。

.container { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
} 
 

 
.element { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100vh; 
 
    height: 100vh; 
 
    background-color: lightblue; 
 
}

<div class="container"> 
 
    <div class="element"></div> 
 
</div>

Answer 1

我不知道我理解你的問題。如果你只是想要一個元素堅持到左邊，那麼你的代碼是完全正確的。

如果你的目標是要提出的是，使其只具有一定的屏幕寬度堅持，那麼我建議你看看css media

截至去年，如果你想這個元素最終「匯」在左邊框，因此在窗口外，我建議你使用CSS媒體和css calc function的組合。

希望這有任何幫助！