如何拥有静态页面布局答案

【问题标题】：How to have static page layout如何拥有静态页面布局
【发布时间】：2013-04-17 14:35:00
【问题描述】：

下面是我的页面布局代码。但是如果我们调整浏览器的大小，它会不断变化。

我们如何才能拥有静态页面布局。

<head>
<style> 
body, html { margin:0; padding:0; } 

#wrap { width:100%; height:100%; } 

#header { width:100%; height:15%; text-align:center; border-bottom-style:solid; border-width:thin; background-color:lightyellow; } 

</style> 
</head> 
<body> 
<div id="wrap"> 
    <div id="header"> 
    <br><br><br> 
    <label for="tb2">textbox2</label><input type="text" name="tb2" size="30" maxlength="30" id="tb2"> 
    <input type="submit" name="search" value="search"> 
    </div> 
</div>

【问题讨论】：

标签： html css layout browser web

【解决方案1】：

不要对宽度和高度属性使用百分比，而是使用绝对值（如px、em）。

#wrap { width:100px; height:100px; }

【讨论】：

感谢您的帮助。但我有一些问题。我们如何知道每台机器的宽度和高度的完整像素。假设如果我使用像素进行设计并且它在我的机器上运行良好，因为我正在测试它。我们怎么知道它会在另一台机器上显示相同的内容。
在不同的浏览器和不同的分辨率下测试你的布局。如果您自己无法做到这一点，那么有很多商业解决方案可以将其作为服务提供。

【解决方案2】：

您正在使用% 定义高度和宽度，因此请改用px、em，因为如果您使用%，它们与您的视口分辨率相关，因此请改用px

<style>
div {
   width: 100px;
   margin: auto;
}
</style>

<div></div>

【讨论】：

【解决方案3】：

您可以使用响应式设计来改变您网站的风格。例如，“全尺寸”显示将为您的主容器使用 1000 像素的宽度。较小的屏幕尺寸（例如 iPad）可能会设置 600 像素的宽度。移动设备可以使用 300px。等等……

在你的 css 中它会变成这样......

#yourPageContainer{width:1000px;}
#otherElements{background-color:#afa;}

@media screen and (max-width:500px){    
    #yourPageContainer{width:500px;}
    #otherElements{background-color:#aaf;}
}

@media screen and (max-width:300px){
    #yourPageContainer{width:300px;}
    #otherElements{background-color:#faa;}
}

这里的关键是根据屏幕大小为容器设置绝对宽度。

我在这里创建了一个示例 http://jsfiddle.net/kxRtv/ - 尝试调整浏览器窗口的大小以查看会发生什么...

这个网站可能会提供一些灵感 - http://mediaqueri.es/

【讨论】：

【解决方案4】：

我之前遇到过屏幕分辨率问题，这解决了我的问题。

如果您希望您的网站在屏幕分辨率更改时动态更改，您可以在 CSS 中对所有页面、容器、包装器等使用 %，以便它可以根据任何屏幕分辨率进行调整。（问题：当屏幕分辨率很大时，这会破坏您的网页设计）
到目前为止我找到的最好的解决方案，我认为其他专业网站也在做的是让你的宽度静态或固定（使用 .px 或 .em），让你的页面位于中心。这将保留您在页面上所做的设计，并且所有内容都将保持原样。

在您的 CSS 中，只需在您的页面、容器、包装器等上添加这一行。

margin:0 auto;

并且您的网站将以任何屏幕分辨率为中心。如需更多示例并了解更多相关信息，请查看此参考资料How to Center a Website With CSS。如果您想在不更改实际屏幕分辨率的情况下测试不同的屏幕分辨率，您可以尝试here。

希望这会有所帮助:)

【讨论】：