Question

我正在努力创建一个完全响应的网站，但我需要页面的默认宽度为960px。我的结构如下：

<div id="container">
<table id="content">
all the content is here
</table>
</div>

现在我希望表格的默认宽度为960px，但我希望它能够重新调整大小，就像它的宽度和高度是auto和它的位置相对一样。这些是我现在拥有的样式

#container{
margin: 0 auto;
position: relative;
}
#content{
width: 960px;
height: auto;
box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
-webkit-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
-mox-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
}

如果我将#content宽度设置为auto，则网页完全响应，但没有默认宽度。如果我将其设置为960px，就像我上面那样，整个网页都有一个固定的宽度。我一直在努力解决这个问题，感谢任何帮助，谢谢！

Answer 1

试试这个：

#content{
    max-width: 960px;
    width: 100%;
    height: auto;
    box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
    -webkit-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
    -mox-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7);
}

请注意，我已将960设置为max-width，但随后将width设置为100％。这将使网站响应，但仍然有960px的宽度（除非浏览器大小小于此）。

Answer 2

我看到albertxing已经给了你一个很棒的答案，但我想建议你去了解Ethan Marcotte - 响应式网页设计的教父（rwd）。

他在Alistapart写了一些很棒的文章，你可能想要开始。好东西！

将网页内容设置为默认宽度，但也可以调整大小

2 个答案: