如何创建适合所有屏幕的网站？

Question

所以喜欢这个网站： http://www.mnguitarshop.com/

如何创建我的网站以适应这样的屏幕分辨率并重新调整大小，如果我更改浏览器窗口的大小？ 所以我的意思是不要在我的网站上留空空间。 另一个人认为有人可以帮助理解盒子模型吗？ 盒子模型示例背后的数学我有一个div类class contentwrapper，自动边距和宽度800px 所以现在我的所有内容都将在div class contentwrapper中 然后让我说我有一个名为navbar的div类 而css将是

    .navbar {
width:900px;
height:55px;
position:fixed;
padding:30px;
border:2px solid gray;
margin:3px;


}

所以我需要计算宽度+高度+顶部，底部+右侧和左侧。 但我不明白的是，我需要使值得到我的contentwrapper宽度的相同值？ 什么时候我需要做减法？ 如果我的价值观错误会怎样？

感谢您的时间。

Answer 1

盒子模型可能很棘手，但这张图片和简要说明应该会有所帮助： html/css box model http://mattryall.net/image/css-box-model.gif

因此，对于总宽度，请添加：

• 宽度+左边距+右边距+左边框+右边框+ 左边距+右边距。

对于总高度，请添加：

• 高度+顶部填充+底部填充+顶部边框+底部边框+ 上边距+下边距。

Answer 2

在这种情况下，我建议你将宽度设置为100％，设置绝对位置而不是固定位置，记住给绝对位置的top，left，right，bottom值，否则ie6,7将不起作用。