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 回答