网站不适合浏览器窗口

Question

我的网站需要大量的屏幕空间才能发挥作用.工作正常的最小宽度约为1200像素.问题是,当它在分辨率较低的屏幕(iPhone或旧计算机)上打开时,页面不能完全适合屏幕,而是在左侧切割.

有没有人知道我能做什么而不是它只是可滚动？

我在整个页面使用CSS层

#page {
position:absolute;
left:50%;
width:1200px;
margin-left:-600px; 
}

然后在这个图层里面我有实际的内容:

#content {
width:1200px;
text-align: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
color: #aaaaaa;
clear:both; 
margin-top:40px;
}

我理解可能原因是margin-left:-600px设置但是如何确保整个内容块居中？或者我只需要将它对齐到左侧？

任何帮助将不胜感激!

PS - 该网站位于http://textexture.com,这是我使用的CSS:http://textexture.com/templates/styles.css

谢谢!

Answer 1

试试这个:

#page {
    width: 1200px;
    margin: 0 auto;
}

#content {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #aaaaaa;
    clear:both; 
    margin-top:40px;
}

绝对定位带有复杂性,只有在实际需要时才应该使用.

而且,似乎没有理由分开#page和#contentdiv.尝试删除#page并梳理它们:

#content {
    width: 1200px;
    margin: 0 auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #aaaaaa;
    clear:both; 
    margin-top:40px;
}