我试图让我的网页水平扩展以适应任何浏览器窗口，但内容仍然位于页面中间。我设法做到了其中之一，但我一生都无法弄清楚如何使两者同时工作。如果我将宽度和高度设置为 100% 并将正文边距设置为 0 auto 它会很好用，但是我的内容不再居中并且所有 div 最终会相互重叠。但是，如果我将宽度设置为 900 像素，那么它会全部居中并且看起来很棒。但是它周围有空白，因为它没有扩展以适应浏览器窗口。
任何人都可以让我知道制作这项工作的诀窍吗？我希望它看起来像这个页面，其中边扩展以适应浏览器，但所有内容仍然居中：
另外，这是我的 CSS：
<style type="text/css">
body {
text-align:center;
margin:0px;
padding:0px;
width:100%;
height:100%;
}
body#home a#nav-home,
body#resume a#nav-resume,
body#portfolio a#nav-portfolio,
body#contact a#nav-contact
{
color: #dfadec;
text-decoration:none;
}
#container {
background-color:#eae5e5;
width:900px;
text-align:left;
margin: 0 auto;
height:auto;
}
#main {
padding-top:200px !important;
padding-bottom:120px !important;
width:900px;
margin-left: auto;
margin-right:auto;
}
#header {
position:fixed;
border-top:solid 15px #4d4d4f;
font-family:Open Sans;
font-size:30px;
color:#4d4d4f;
background-color:#FFF;
width:900px;
padding-bottom:45px;
}
#title {
padding-top:30px;
position:absolute;
margin-left:60px;
}
#footer {
color:#FFF;
position:fixed;
font-family:Open Sans;
font-size:12px;
background-color:#dfadec;
width:900px;
padding-bottom:45px;
padding-top:45px;
margin: 0 auto;
height: auto;
}
#nav {
padding-top:70px;
font-size:12px;
color:#CCC;
margin-left:570px;
}
#nav a:link {
color:#CCC;
text-decoration:none;
}
#nav a:hover {
color:#dfadec;
text-decoration:none;
}
h1 {
font-size:60px;
font-family:Open Sans;
color:#4d4d4f;
margin-top:-150px;
}
h2 {
font-size:40px;
font-family:Open Sans;
color:#4d4d4f;
font-weight:normal;
margin-top:-40px;
}
#resume {
background:#5c5c54;
width:130px;
height:130px;
font-family:Open Sans;
color:#FFF;
margin-left:5px;
text-align:center;
position:absolute;
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear, ease-in;
}
#resume p {
vertical-align:middle;
padding-top:45px;
font-size:12px;
}
#resume:hover {
background-color:#373732;
color:#FFF;
}
#work {
background:#dfadec;
width:130px;
height:130px;
font-family:Open Sans;
color:#FFF;
margin-left:150px;
text-align:center;
position:absolute;
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear, ease-in;
}
#work p {
vertical-align:middle;
padding-top:45px;
font-size:12px;
}
#work:hover {
background-color:#705676;
color:#FFF;
}
#skills {
background:#4d4d4f;
width:130px;
height:130px;
font-family:Open Sans;
color:#FFF;
margin-left:295px;
text-align:center;
position:absolute;
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear, ease-in;
}
#skills p {
vertical-align:middle;
padding-top:45px;
font-size:12px;
}
#skills:hover {
background-color:#262628;
color:#FFF;
}
img#icon {
background-color:#4d4d4f;
padding:12px;
}
#intro {
width: 400px;
font-family: Open Sans;
font-size: 12px;
color: #4d4d4f;
margin-left: 320px;
position: absolute;
left: 500px;
top: 522px;
text-align:justify;
}
</style>
有什么建议么？请告诉我。如果我也需要发布 HTML，请告诉我。我只是认为问题出在 CSS 中，因为这是我定义宽度等的地方。
谢谢！
普加