Question

我使用了position: fixed;，因此当向上或向下滚动时，框会保持在同一位置。

问题是类别（div）在大的时候没有显示所有内容。类别底部缺少内容

<div style="background-color:pink; height:150px; margin-bottom:10px">header </div>

<div id="side_manu" style="float:left; width:190px;  position: fixed; margin-bottom:300px;">
    <div style="border:1px solid black"> 
       Categories 
                 <div style="padding:10px"> Cat 1 </div>
                 <div style="padding:10px"> Cat 2 </div>
                 <div style="padding:10px"> Cat 3 </div>
                 <div style="padding:10px"> Cat 4 </div>
                 <div style="padding:10px"> Cat 5 </div>
                 <div style="padding:10px"> Cat 6 </div>
                 <div style="padding:10px"> Cat 7 </div>
                 <div style="padding:10px"> Cat 8 </div>
                 <div style="padding:10px"> Cat 9 </div>
                 <div style="padding:10px"> Cat 10 </div>
                 <div style="padding:10px"> Cat 11 </div>
                 <div style="padding:10px"> Cat 12 </div>
                 <div style="padding:10px"> Cat 13 </div>
                 <div style="padding:10px"> Cat 14 </div>
                 <div style="padding:10px"> Cat 15 </div>
                 <div style="padding:10px"> Cat 16 </div>
                 <div style="padding:10px"> Cat 17 </div>
                 <div style="padding:10px"> Cat 18 </div>
    </div>
</div>

<div id="itemlist" style="float:left; width:600px; margin-left:200px; margin-right:10px; ">
       <div style="width:600px; background-color:yellow; padding: 10px;"> 
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 1 <br /> Item 1 <br /> Item 1</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 2 <br /> Item 2 <br /> Item 2</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 3 <br /> Item 3 <br /> Item 3</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 4 <br /> Item 4 <br /> Item 4</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 5 <br /> Item 5 <br /> Item 5</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 6 <br /> Item 6 <br /> Item 6</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 7 <br /> Item 7 <br /> Item 7</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 8 <br /> Item 8 <br /> Item 8</div>
          <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 9 <br /> Item 9 <br /> Item 9</div>
       </div>
</div>

<div id='display_cart' style="width:190px; float:left; font-size:12px; background-color:green "> Cart Info.</div>

Answer 1

内容在那里，但由于div是固定的，你永远不能向下滚动以查看框底部的任何内容。

如果可能的话，我会阅读更多关于页面布局和css的内容 - 例如，你在这里使用很多DIV，最好使用列表，并且有很多内联css可以替换为几行css。

---- ----编辑

假设你想要保留这种设计，你可以绕过它的一种方法（虽然可能不是最方便用户或美观的）是设置侧边菜单的高度并将溢出设置为自动。

所以你要替换“side_manu”div将如下：

<div id="side_manu" style="float:left; width:190px;  position: fixed; margin-bottom:300px; height: 75%; overflow: auto; border:1px solid black"> 
   Categories 
             <div style="padding:10px"> Cat 1 </div>
             <div style="padding:10px"> Cat 2 </div>
             <div style="padding:10px"> Cat 3 </div>
             <div style="padding:10px"> Cat 4 </div>
             <div style="padding:10px"> Cat 5 </div>
             <div style="padding:10px"> Cat 6 </div>
             <div style="padding:10px"> Cat 7 </div>
             <div style="padding:10px"> Cat 8 </div>
             <div style="padding:10px"> Cat 9 </div>
             <div style="padding:10px"> Cat 10 </div>
             <div style="padding:10px"> Cat 11 </div>
             <div style="padding:10px"> Cat 12 </div>
             <div style="padding:10px"> Cat 13 </div>
             <div style="padding:10px"> Cat 14 </div>
             <div style="padding:10px"> Cat 15 </div>
             <div style="padding:10px"> Cat 16 </div>
             <div style="padding:10px"> Cat 17 </div>
             <div style="padding:10px"> Cat 18 </div>

请注意添加的高度和溢出参数，以及我已删除额外的边框div并将border属性添加到“side_manu”div。

Answer 2

我认为您只需删除内容中任何不必要的标题或填充，以符合以下要求：

http://jsfiddle.net/Dyx22/6/

向上或向下滚动时Div / Box出现问题

2 个答案: