Question

我有一个功能齐全的网页，有三个部分。横幅容器，菜单容器和内容容器

这是布局：

The layout of my webpage http://oi60.tinypic.com/2qjhc40.jpg

问题在于，这些内容使用position: fixed;以及margin，left和top属性进行定位。这意味着当Web浏览器小于网页的大小时，我无法滚动它。是的。我知道解决方案是删除“position：fixed”（已在stackoverflow上关于此主题的其他线程上指出）。但问题是我在移除固定位置时无法扣留布局，甚至没有关闭。

我最接近的就是将内容容器的position属性更改为relative。当Web浏览器窗口的大小大于整个页面的宽度时，这不会影响布局，当Web浏览器窗口小于内容容器时，我确实可以滚动它。但是当然，当我减小浏览器窗口的大小时，我的内容容器跟随它并遮盖我的菜单容器（因为它仍然具有固定的定位）。此外，我的菜单按钮（列表中的链接），即使没有被内容容器所掩盖，也会在点击它们并将鼠标悬停在它们上时停止反应。

因此，如何使用定位和其他属性来定位您的网页是否有一个很好的经验法则，因为显然我已经把它弄错了。

这些是我的三个容器的相关css属性：

div#banner_container{
    position: fixed;
    width: 650px;
    height: 75px;
    margin-left: 50px;
    margin-top: 8px;
}

div#menu_container {
    top: 95px;
    position: fixed;
    width: 150px;
    height: 150px;
    margin-left: 50px;
    margin-top: 10px;
}

ul#menu {
    position: fixed;
    left: 18px;
    top: 89px;
}

div#content_container {
    position: fixed;
    top: 95px;
    width: 100%;
    max-width: 492px;
    height: 500px;
    margin-left: 210px;
    margin-top: 10px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

提前致谢！

Answer 1

这里的根本问题是您使用position: fixed来设置整个布局的样式。这是非常糟糕的做法，可以完全避免。

如果您真的不想删除固定定位，则可以将内容容器的overflow属性设置为scroll：

div#content_container {
    ...
    overflow: scroll;
}

请注意，overflow属性还支持overflow-x和overflow-y，这样您就可以单独处理水平或垂直滚动条 - 这些情况可能会更好。

Answer 2

这对你有好处吗？

http://jsfiddle.net/0cmwhafq/2/

我只是将所有位置设置为相对位置，并使用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;

}

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

我应该如何正确使用`position`和其他属性来定位我的网页？

2 个答案: