如何解决固定宽度或基于百分比的网站设计
| 我的问题是非常基本和通用的。 我开始使用div标签设计页面。现在我对两种方法感到困惑。 我应该保持div的宽度和高度固定（即像素固定）还是 我应该保持divs变量的宽度和高度（即使用％代替像素）。 我个人喜欢第一种方法，该方法可以修复所有问题，并且在不同的屏幕分辨率下几乎没有任何东西受到干扰的可能性，但是缺点是，如果屏幕分辨率低于我期望的屏幕分辨率，那么滚动条会使网站看起来很糟糕（可能是还有更多缺点，但目前我不记得了:)），所以在这种情况下，第二种方法就出现了，但问题是，一旦您开始使用％作为宽度和高度，尽管设计了页面却很难设计更稳定。 我对这两种方法感到困惑，并且需要对以上两种方法进行投入... 提前致谢。解决方法
你是在自问自答。第二种方法在大多数情况下都更好，因为它可以很好地适合所有屏幕分辨率。想想什么时候有人尝试使用手机加载您的页面，然后使用百分比会有所帮助。
而且我不认为使用百分比会使设计变得更困难，甚至认为它更容易。例如，如果要将主表的宽度调整为屏幕的1/4，现在只需设置
width: 25%
width: 250px;
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta content=\"text/html; charset=utf-8\" http-equiv=\"Content-Type\" />
<title>Untitled 1</title>
<style type=\"text/css\">
html,body{
height:100%;
}
/* Backward Compatible for IE6 */
* html #container{
height:100%;
}
/* Top logo and bottom footer */
div#logo,div#footer {
max-width: 90%;
color:#000000; background-color:#ffffff;
padding:10px 0px 10px 0px;
text-align:center;
margin-left:auto; margin-right:auto;
}
/* Top navigation bar */
div#navbar {
max-width: 90%;
color:#ffffff; background-color:#124a9f;
padding:10px 0px 10px 0px;
text-align:center;
margin-left:auto; margin-right:auto;
}
/* Container for three lower boxes */
div#container {
max-width: 90%;
height:70%;
color:#000000; background-color:#ffffff;
margin-bottom:10px; margin-left:auto; margin-right:auto;
}
/* Main content (center box) */
div#main {
overflow:auto;
height: 100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#efecf8;
}
/* Full navigation menu (left box) */
div#leftcol {
float:left;
width:10%;
height:100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#bfdbf7;
}
/* Featured content (right box) */
div#rightcol {
float:right;
width:10%;
height:100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#bfdbf7;
}
</style>
</head>
<body>
<div id=\"logo\">
Logo
</div>
<div id=\"navbar\">
Navigation Bar
</div>
<div id=\"container\">
<div id=\"leftcol\">Left Column</div>
<div id=\"rightcol\">Right Column</div>
<div id=\"main\">Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum,enim convallis vestibulum varius,quam mi accumsan diam,sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis,fermentum ut,accumsan quis,tempor at,ipsum. Nam felis elit,sollicitudin id,ultrices faucibus,fringilla vel,dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros,mattis quis,mattis vestibulum,congue quis,felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
Lorem ipsum dolor sit amet,felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet,felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
</div>
</div>
<div id=\"footer\">
©2011 Ideal Web Design Co.
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。