我有一个网站,我希望在其中具有与 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 的,并根据浏览器窗口大小自动减少边距。
谢谢
最佳答案
第一步
将 #site-container
元素的宽度设置为固定值(例如 990px
),而不是 100%
。目前,它会自动填满窗口,不留余地。 StackOverflow 使用固定值 980px
。我相信您的网站使用 990px
。
或者,您可以使用 display:table;
将容器设置为类似表格的布局。这样它将根据其内容的宽度动态拉伸(stretch)。在这种情况下,不需要任何 width
声明。
第 2 步
从 #header
和 #content
元素中移除固定边距。它们是多余的并且扭曲了整个布局的位置。父 #site-container
将有足够的余量供它们使用。
关于html - 动态页边距 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18802515/