html - 动态页边距 CSS

Question

我有一个网站，我希望在其中具有与 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 似乎是 float 的，并根据浏览器窗口大小自动减少边距。

谢谢

Answer 1

第一步

将 #site-container 元素的宽度设置为固定值(例如 990px​​)，而不是 100%。目前，它会自动填满窗口，不留余地。 StackOverflow 使用固定值 980px。我相信您的网站使用 990px​​。

或者，您可以使用 display:table; 将容器设置为类似表格的布局。这样它将根据其内容的宽度动态拉伸(stretch)。在这种情况下，不需要任何 width 声明。

第 2 步

从 #header 和 #content 元素中移除固定边距。它们是多余的并且扭曲了整个布局的位置。父 #site-container 将有足够的余量供它们使用。