Question

我在页面顶部有一个固定的div但是div的内容没有在缩小窗口大小的情况下使用html主体滚动。有人可以帮帮我吗？

这里是jsfiddle链接：http://jsfiddle.net/ALqd6/

的CSS：

.header容器

{

width:100%;

position:fixed !important;

display:block;

overflow:hidden;

top:0;

background:#000;

height:70px;

color:red;

}

HTML：

    <div class="header-container" style="min-width:1200px;margin:0 auto;">
        <table cellpadding=19 class="hc-table" style="height:70px;">
            <tr>
                <td>m-1</td>
                <td>m-2</td>
                <td>m-3</td>
                <td>m-4</td>
                <td>m-5</td>
                <td>m-6</td>
                <td>m-7</td>
                <td>m-8</td>
                <td>m-9</td>
            </tr>
        </table>
    </div>  
       </div></div>

Answer 1

根据position属性documentation，当您使用position: fixed时，“将其定位在相对于屏幕视口的指定位置，不会滚动“。

时移动

这意味着无论您如何垂直或水平滚动页面，对象都将保持在当前位置。

为了达到你提到的结果，我相信你需要使用一个JavaScript方法来改变div的left属性，以反映用户在窗口宽度不够大时执行的水平滚动以适应整个内容。

对于这种JavaScript方法可能对您有用的一些链接是：

Answer 2

这可能就是你想要的。 http://jsfiddle.net/vn5Uj/

.header-container{
 width:100%;
 !important;
display:block;
overflow:hidden;
top:0;
background:#000;
height:70px;
color:red;
}

固定div不会在缩小窗口大小时滚动窗体

2 个答案: