如何使用position：绝对滚动

Question

我的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;
}

当我缩小浏览器的大小时，它只生成一个水钻滚动条来显示流体内容！所以固定内容在浏览器中显示一半！我已在下图中显示了该场景。如何让浏览器接受固定内容并使用滚动条显示确切的数量。

我尝试将其置于相对模式但不起作用！

Answer 1

我不确定我是否完全理解问题所在 - 也许滚动条是问题？如果是这种情况，那么您可能希望将最小宽度值减小到远小于1000px的值。通过设置min-width，您声明此部分应不小于x。在这种情况下，x = 1000px。这就是你获得滚动条的原因。

您需要删除初学者的最小宽度值。除此之外，你将不得不评估你确定浏览器宽度的选项，也许使用jQuery的东西：

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

Answer 2

首先，“固定”或“绝对”位置不适用于滚动。一旦将其设置为“固定”或“绝对”，子项不再局限于其父相对性，并且由于固定位置而被移出父流。如果您想要滚动，请设置相对于父级的位置。

此致 拉维