Html 动态页边距CSS

我有一个网站，我想有一个类似的布局为Stackoverflow关于浏览器窗口大小

因此，我有以下CSS：

#site-container {
    margin: 0px auto;
    text-align: left;
    width: 100%;
    zoom: 1;
    position: relative;
}

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 81.25%;
    background-color: #fbf9ef;
}

#div-menu {
    display: inline;
}

#header {
    width: 990px;
    height: 80px;
    margin-left : 127px;
    margin-right : 127px;
    margin-bottom: 12px;
    margin-top: 20px;
    border-bottom: 1px solid #c0c0c0;
}

#content {
    width: 990px;
    margin-left : 127px;
    margin-right : 127px;
}

但是，当我调整浏览器窗口大小时，它的行为与Stackoverflow不同，Stackoverflow似乎是浮动的，并根据浏览器窗口大小自动减少边距

---

谢谢

您应该使用

左边距：auto；右边距：0

使块元素居中，而不是固定的边距值。

步骤1

将

#站点容器

元素的宽度设置为固定值（例如

990px

），而不是

100%

。目前，它会自动填充窗口，不留任何空白。StackOverflow使用固定值

980px

。我相信你的网站使用了

990px

或者，您可以使用

display:table。这样，它将根据内容的宽度动态拉伸。在这种情况下，不需要任何
width
声明

步骤2

从
#标题
和
#内容
元素中删除固定边距。它们是多余的，扭曲了整个布局的位置。父级
#站点容器
将有足够的边距容纳这两个容器。
但是Stackoverflow在右侧也有边距。将页边距0放置在右侧容器会粘在浏览器窗口上。另一种可能是将页边距设置为左右自动，并在左右两侧放置固定的填充。我没有说要设置
页边距：0
，我说的是
页边距左/页边距右：自动。这是最常见和最传统的方法。不需要使用填充