Css 流体布局的Div定位

我想知道如何得到我的计划布局

当滚动容器中的内容时，我试图在页面周围放置一个白色边框，边框应该仍然在顶部。现在有一个边框，但在调整浏览器窗口的大小或内容区域中的内容过多时，内容仍然可以放置在边框上。试图使布局非常流畅，以便在任何设备上都可以调整大小，只需将内容和菜单堆叠在一起即可

我还试图将容器中的内容区域居中

我认为位于固定底部中心位置的导航区域在任何内容顶部都始终可见，这是目前唯一按计划工作的部分

非常感谢您的帮助

这是我的html：

<div id="container_border">

    <!-- CONTAINER -->
    <div id="container">
        <div id="content_area">

            <div class='thumb' data-container='project1_container'>
             </div>

            <div class='thumb' data-container='project2_container'>
             </div>

            <div class='thumb' data-container='project3_container'>
             </div>

            <div class='thumb' data-container='project4_container'>
             </div>

            <div class='thumb' data-container='project5_container'>
             </div>

            <div class='thumb' data-container='project6_container'>
             </div>
        </div>
        <div id="nav_area">
            <div id="nav">
                <div class='link' data-container='a_container'><a href="#">A</a>
             </div>
             <div class='link' data-container='b_container'><a href="#">B</a>
             </div>
             <div class='link' data-container='c_container'><a href="#">C</a>
             </div>
             <div class='link' data-container='d_container'><a href="#">D</a>
             </div>

            </div>
        </div>
    </div><!-- END CONTAINER -->
    </div>

---

我假设这是您想要的，如果不是，请包括一个图表添加以下内容：

#container {
    overflow: hidden;
}

并将此更改为：

.thumb {
    width: 16.6%;
}

改变16.6%；关于如何使用断点，这是100/6

---

我不太确定这是否是您需要的，但以下是示例：

使用display:inline块和text align:center将使拇指居中

#content_area {
 text-align:center;
}
.thumb { 
display: inline-block;
}

---

我使用border和removing fixed positions对布局进行了另一次更改

请将其放入类似于JSFiddle的内容中这里有一个JSFiddle:position:fixed元素太多了。唯一应该修复的元素是它听起来像的导航。你可以简单地给body元素添加一个白色边框。你能再解释一下吗？如果不能滚动内容区域之外的内容，我会不会遇到同样的问题？您好，谢谢您的回复！设置溢出：隐藏；它提供了正确的效果，但我仍然希望滚动查看实际溢出容器div边界的内容。将宽度设置为16.6%在这里或在JSFIDLE中似乎对我不起作用。一件小事是，以渐变为背景的内容区域不会一直延伸到边界。我真的想不出如何让它一直延伸到白边。

#content_area {
 text-align:center;
}
.thumb { 
display: inline-block;
}