как использовать положение: абсолютное с прокруткой

Question

У меня есть следующий div с CSS для него в моем HTML. Я установил 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; 
} 

, когда я уменьшить размер браузера, он генерирует только полосу прокрутки horizontle показать содержание жидкости! поэтому фиксированный контент наполовину показан в браузере! Я отобразил сценарий на следующем изображении. Как я могу заставить браузер принять фиксированный контент и показать точную сумму с помощью полосы прокрутки.

Я попытался надеть его на относительный режим, но он не работает!

Answer 1

Я не уверен, если я полностью понимаю, что вопрос - возможно, полоса прокрутки является проблема? Если это так, то вам может понадобиться уменьшить значение min-width до значения значительно меньше 1000 пикселей. Установив min-width, вы заявляете, что этот раздел должен быть не меньше x. И в этом случае x = 1000px. Вот почему вы получаете полосу прокрутки.

Вам необходимо удалить это значение min-width для стартеров. Помимо этого вы должны оценить ваши варианты для определения ширины браузера, возможно, с помощью JQuery что-то вдоль линий:

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

Answer 2

Прежде всего, позиция «Fixed» или «Абсолют» не работает с прокрутки. После того, как вы сделаете его Fixed или Absolute, ребенок больше не ограничивается родительской относительностью и удаляется из родительского потока из-за фиксированной позиции. Сделайте позицию: относительно родителя, если вы хотите прокручивать ее.

С уважением, Ravi