固定宽度或基于百分比的网站设计

我开始使用div标签设计一个或多个页面。现在我对两种方法感到困惑。

我应该保持宽度和固定的div的高度（即固定像素）或
我应该保持宽度和可变的div的高度（使用％而不是像素即）。

我个人很喜欢，你解决一切并没有在不同的屏幕分辨率越来越感到不安的东西非常少的机会，但其缺点是，如果屏幕分辨率低于我的预期的屏幕分辨率的第一种方法，则滚动条使现场看起来很糟糕（可能有更多的缺点，但目前我不记得它:)），所以在这种情况下，第二种方法出现在图片中，但事情是一旦你开始使用％为你的宽度和高度设计它是非常困难的尽管它的页面设计更稳定。

我感到困惑与这两种方法，需要对上述两个输入...

在此先感谢。

来源

2011-05-26 Sumit

添加css标签，导致您选择的任何选择，这就是您将如何声明您的设计。 – NGLN 2011-05-26 16:44:38

你回答了你自己的问题。第二种方法在大多数情况下更好，因为它可以很好地适合所有的屏幕分辨率。想想有人尝试使用手机加载您的页面，然后使用百分比将有所帮助。

而且我不认为使用百分比会使设计更难，我甚至认为它更容易。例如，如果要将主表宽度调整为屏幕的四分之一，则现在只需设置width: 25%而不是设置（比如说）width: 250px;，并猜测它是否适用于此尺寸的显示器或不同尺寸的显示器。

想象一下，您目前正在使用17英寸笔记本电脑，并且您的页面布局宽度固定设置为800像素，这将适合您的屏幕，但是当您在24英寸显示器上运行该布局时，看起来像书桌上的纸。

有百分比，比方说，70％将适合您的17英寸笔记本电脑和24英寸显示器。

下面是一个样本流体HTML页面，供您参考，尝试查看其百分比外观。请注意，无论您最小化屏幕，布局仍可以调整。只需简单地复制和粘贴，这就是设计的重点。

<!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, 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, 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, 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, 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, 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, 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, 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, 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. 
    </div> 
</div> 
<div id="footer"> 
    &copy;2011 Ideal Web Design Co. 
</div> 
</body> 

</html>

来源

2011-05-26 16:15:02

这真的需要吗？如果他只是用一堆div设计一般页面，那他为什么需要指定每个div的高度和宽度？我可以看到这一点很重要，有些情况下需要特定的高度和宽度，但对于大多数一般情况（例如一个带有图像的div或仅仅是文本），这可能更麻烦，然后任何东西 – 2011-05-26 16:19:01

我不'他认为他的担忧在于你的讨论范围。他的意思实际上应该是使用％或固定像素来设计页面，我假设他一般在讨论页面布局，而不是针对块级元素的div或特定的东西。 – 2011-05-26 16:27:29

高度争议 - 和高度争议:-) 首先：这个（SO）网页呢？ – leonbloy 2011-05-26 16:31:05

这个问题真的取决于哪些功能将驻留在这些div中。如果需要增长，那么百分比可能是有保证的。如果没有，那么你应该可以使用px

来源

2011-05-26 16:15:29 Schoffelman

这一切都取决于你正在创建的网站的布局和设计。

第二种方法用于“流体”布局（网站需要扩展并将所有可用空间提供给他们），否则与固定布局相比，您没有其他显着的优势。

我建议你看一下由W3C这里提供的屏幕分辨率的统计数据： http://www.w3schools.com/browsers/browsers_display.asp

正如你可以看到，800x600的几乎没有了，所以重点是1024×768及以上会有所帮助。

我不知道你是到学习过程中有多远，但是当你觉得自己考虑看看大多数开发者使用，我建议您访问的960网格系统： http://960.gs/

来源

2011-05-26 16:20:56 Tom

我猜第一种方法对于99％的wepapps更好。你可以看看Blueprint css framework，这是一种使用网格状布局的非常简单和干净的方式。

来源

2011-05-26 16:41:19 Necrower

固定宽度或基于百分比的网站设计

回答

相关问题