0

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

当我减小浏览器的大小时,它只会生成水平滚动条来显示流畅的内容!所以固定内容在浏览器中显示一半!我在下图中显示了该场景。如何让浏览器接受固定内容并使用滚动条显示确切数量。

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

无需滚动

在此处输入图像描述

4

2 回答 2

1

我不确定我是否完全理解问题所在——也许滚动条是问题所在?如果是这种情况,那么您可能希望将最小宽度值减小到明显小于 1000 像素的值。通过设置 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>
于 2013-04-11T04:27:00.277 回答
1

首先,位置“固定”或“绝对”不适用于滚动。一旦将其设为 Fixed 或 Absolute,子节点就不再局限于其父相对关系,并且由于位置固定而被移出父流。如果您希望它滚动,则使位置:相对于父级。

问候,拉维

于 2013-04-11T04:39:11.890 回答