如何使用位置：絕對滾動

我在我的HTML中使用了CSS以下的div。我已將該div固定到我的頁面底部。我設計了我的html內容，以便在瀏覽器尺寸變小時進行響應並重新排列。如何使用位置：絕對滾動

<div id="button-section"> 
<!-- Section for function buttons --> 
    <div id="function-buttons"> 
    <div class="fn-button"> 
    <!-- Function button --> 
     <span>My Current Checks</span> 
    </div> 
    </div> 
</div> 



#button-section{ 
width: 100%; 
height: 150px; 
position: fixed; 
bottom: 0; 
background-color: rgb(229, 229, 255); 
min-width:1000px; 
} 

#function-buttons{ 
width: 70%; 
height: 100%; 
float:left; 
min-width: 870px; 
}

當我減小瀏覽器的大小時，它只會生成水平滾動條來顯示流體內容！所以固定的內容在瀏覽器中顯示一半！我在下面的圖片中顯示了這個場景。如何讓瀏覽器接受固定內容並使用滾動條顯示確切的數量。

我試圖把它放在相對模式，但它不工作！

without scrolling

enter image description here

來源

2013-04-11 Imesh Chandrasiri

值得一提的是'位置：fixed'是不好的做法，因爲在各種設備上就可以打破你的佈局，重疊和這樣的。 – sanjaypoyzer 2013-04-11 11:11:23

我該如何設置固定在瀏覽器底部的元素！ – 2013-04-11 13:30:12

我不知道如果我完全理解這個問題是什麼 - 也許是滾動條的問題？如果是這種情況，那麼您可能希望將最小寬度值減小到遠小於1000像素的值。通過設置最小寬度，你聲明這個部分應該不小於x。在這種情況下，x = 1000px。這就是爲什麼你得到一個滾動條。

您需要刪除初始者的最小寬度值。除此之外，你必須評估你的選擇決定了瀏覽器的寬度，可能使用的線沿線的東西的jQuery：

<script type="text/javascript"> 
$(document).ready(function(e) { 
    var windowWidth = $(document).width(); 
    $('#button-section').css('min-width', windowWidth+'px'); 
}); 
</script>

來源

2013-04-11 04:27:00

這不行！這裏發生的是，即使滾動條滾動瀏覽內容，它也不會滾動瀏覽功能按鈕。 func按鈕部分粘在它的位置，但不滾動！如果您可以在圖像中看到，它會顯示功能按鈕保持在原位，但其他元素將滾動！ – 2013-04-11 04:32:51

爲了真正幫助你，我需要在一些公開訪問的網站上看到這一點。屏幕截圖確定什麼是錯誤的，以及爲什麼事情的行爲如此糟糕。此外，你的問題可以使用一點澄清 - 就像你期望的行爲，究竟是什麼錯誤，並解釋你的截圖。這些圖像中有元素，我不確定它們是什麼以及它們與您的問題有何關係。 – 2013-04-11 04:47:22

首先，位置「固定」或「絕對」不工作滾動。一旦你把它定爲固定或絕對，孩子不再侷限於它的父親相對論，並且由於固定的位置而被移出父親流。如果您想要滾動，請設置位置：相對於父級。

問候，拉維

來源

2013-04-11 04:39:11

我該如何將元素固定到頁面的底部，因爲它是相對的！你能解釋一下，如果有任何方法！ – 2013-04-11 04:56:47

你可以做一些技巧。將它修復到底部，但是當有人試圖重新調整窗口大小或滾動大小時，請通過JavaScript檢測它，並使其相對。就像你可以嘗試的東西。 – 2013-04-11 06:03:47

如何使用位置：絕對滾動

回答

相關問題