Css 如何正确使用“position”和其他属性来定位我的网页？

我有一个功能齐全的网页，由三部分组成。标题容器、菜单容器和内容容器

div#banner_container{
    position: relative;
    width: 99%;
    height: 75px;
    margin:1%;
    background-color:red;
}

div#menu_container {
    position: relative;
    width: 18%;
    margin:1%;
    height: 350px;
    background-color:green;
    float:left;


}


div#content_container {
    position: relative;
    width: 79%;
    height: 500px;
    margin-left:1%;
    margin-top:1%;
    float:left;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color:blue;

}

这是布局图：

问题是，使用

position:fixed对这些进行定位

以及

边距

、

左侧

和

顶部

属性。这意味着当web浏览器小于网页大小时，我无法在其上滚动。是的。我知道解决方案是删除“position:fixed”（在stackoverflow的其他线程中已经指出了这一点）。但问题是，在移除固定位置时，我无法保留布局，甚至无法关闭

最接近这一点的方法是将内容容器的position属性更改为

relative

。当web浏览器窗口的大小大于整个页面的宽度时，这不会影响布局，当web浏览器窗口小于内容容器时，我确实可以在其上滚动。当然，当我减小浏览器窗口的大小时，我的内容容器也随之减小，并使我的菜单容器黯然失色（因为它仍然有一个固定的位置）。此外，我的菜单按钮（即列表中的链接）即使没有被内容容器遮挡，也会在单击并将鼠标悬停在上面时停止反应

那么，对于如何使用定位和其他属性来定位网页，是否有一个好的经验法则呢？因为很明显，不知怎么的，我完全搞错了

以下是我的三个容器的相关css属性：

div#banner#u容器{
位置：固定；
宽度：650px；
高度：75px；
左边距：50像素；
边缘顶部：8px；
}
div#菜单_容器{
顶部：95px；
位置：固定；
宽度：150px；
高度：150像素；
左边距：50像素；
边缘顶部：10px；
}
菜单{
位置：固定；
左：18px；
顶部：89px；
}
div#content_容器{
位置：固定；
顶部：95px；
宽度：100%；
最大宽度：492px；
高度：500px；
左边距：210像素；
边缘顶部：10px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}

---

提前谢谢

这里的基本问题是，您正在使用

position:fixed

设置整个布局的样式。这是非常糟糕的做法，完全可以避免

如果您确实不想删除固定位置，可以将内容容器的

溢出

属性设置为

滚动

：

div#content_容器{
...
溢出：滚动；
}

请注意，

overflow

属性还支持

overflow-x

和

overflow-y

，这允许您分别满足水平或垂直滚动条的要求-在您的情况下，这可能更好。

这对您有好处吗

我只是将所有位置设置为相对，并使用float:left作为菜单和内容容器

div#banner_container{
    position: relative;
    width: 99%;
    height: 75px;
    margin:1%;
    background-color:red;
}

div#menu_container {
    position: relative;
    width: 18%;
    margin:1%;
    height: 350px;
    background-color:green;
    float:left;


}


div#content_container {
    position: relative;
    width: 79%;
    height: 500px;
    margin-left:1%;
    margin-top:1%;
    float:left;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color:blue;

}

---

如果希望布局居中，只需添加一个包含所有布局的包装器

此建议似乎可以在我的内容容器中滚动内容。但是，我希望能够在实际的浏览器窗口上滚动（不确定我是否正确解释了这一点，抱歉我的英语）。类似于

body{overflow:scroll}

的东西也没有起作用。如果您能详细说明为什么使用固定定位是非常糟糕的做法，以及我应该做什么，或者提供一个页面链接来解释这一点（因为我还没有找到），我将非常感激@JonatanStenbacka如果您的整个布局具有固定位置，则无法在浏览器窗口上启用滚动。正如我在问题中所说：我知道问题在于，我的网页上元素的

位置设置为
固定。但问题是，我尝试了所有其他类型的定位，但始终无法恢复不同容器之间的正确距离，也无法使一切按预期工作。我不是在寻找在浏览器窗口上启用滚动的廉价技巧，而是关于如何使用
position
和其他属性定位我的网页的指南（可能有点模糊，对不起）@JonatanStenbacka我建议大家看看各种流行网站的源代码，看看它们是如何实现这种布局的。实际上，为你解决这个问题的可能性非常大，你的问题可能会因为范围太广而关闭。我知道这不是一个合适的答案，但它可能会有所帮助。搜索“响应性设计”，从你找到的最简单的例子开始。您现在正在设计桌面，但我保证您希望您的页面能够在平板电脑和手机上运行。你看，像这样的例子正是我所需要的！通过使用您的示例作为模板，我能够在保留原始设计的同时删除所有固定位置。创建一个包装器
div
，指定整个网页的宽度（防止内容容器浮动在菜单下方，因为我希望内容容器和菜单上有一个固定的宽度）和边距（
margin:0 auto；
）。使我的布局在web浏览器中居中。非常感谢。