3

祝你有美好的一天。我正在处理一个网页，但我一直在定义最大和最小宽度。基本上，当像大多数网页一样缩小网页时，我希望我的页面居中。请需要专家帮助。尽快谢谢。

body
{
  height:100%;
  width:100%;

  margin:0 auto; 
  background-image: -webkit-linear-gradient(top, #E5E5E5 30%, #999);
  background-image: -moz-linear-gradient(top, #E5E5E5 30%, #999);
  background-image: linear-gradient(top, #E5E5E5 30%, #999);

}

#mainContainer
{
background-image:url(bg3.jpg);
background-repeat:repeat;
background-color:#999;
width:70%; /*default width in percent for a liquid layout.
the problem is when I zoom out the page the width remains to be in 70% therefore forcing the contents to be pushed to the left corner instead of being centered.*/
min-width:940px; 
margin:5px auto;
height:100%; 
padding:0 1% 0 1%; 
-webkit-border-radius: 10px;
border-radius: 10px;
}
4

2 回答 2

2

基本上这只能通过脚本来实现。

获取浏览器屏幕的 70% 宽度。将该宽度转换为其相应的 px 值 使用从转换/计算中获得的值设置#mainContainer 的最大宽度。

$( document ).ready( function(){
setMaxWidth();

function setMaxWidth() {
$( "#mainContainer" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
}

});

- 感谢 Esailija链接

于 2011-11-18T15:00:17.400 回答
0

它以我为中心。但是有一些潜在的问题：

  1. 要将高度 100% 应用于#mainContainer，您不仅需要将高度应用于正文，还需要将高度应用于 html。
  2. 您还需要清除 html 和 body 上的填充和边距，否则它们会添加滚动。
  3. 您不能为高度为 100% 的容器设置边距，否则它们会将滚动条添加到页面。我用 body 上的填充和“box-sizing:border-box;”来模拟它们，但它在旧版 IE 中无法正常工作，所以你需要对它们进行 hack。
  4. 此外，您最好将高度更改为最小高度，否则它会变得混乱，然后您将在#mainContainer 中有很多内容。

在这里修复它们：http: //jsfiddle.net/WLPGE/1/

于 2011-11-14T16:17:46.130 回答