如何使用位置：绝对滚动

我在我的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

如何使用位置：绝对滚动

回答

相关问题