缩小页面时的css3 min-max宽度

时间:2011-11-14 13:39:24

标签: html css layout liquid-layout

祝你好运。我正在网页上工作,但我坚持定义最大和最小宽度。基本上我希望我的页面在缩小网页时居中,就像大多数网页一样。请需要专家的帮助.ASAP谢谢。

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;
}

2 个答案:

答案 0 :(得分:1)

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

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

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

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

});

- 谢谢Esailija link

答案 1 :(得分:0)

它以我为中心。但是有很多潜在的问题:

  1. 要将高度100%应用于#mainContainer,您需要不仅将高度应用于body,还应用于html。
  2. 你还需要清除html和body上的填充和边距,否则它们会添加滚动条。
  3. 您无法为100%高度的容器设置边距,或者他们会将页面添加到页面。我用身体上的填充和“box-sizing:border-box;”来模仿它们,但它在旧的IE中无法正常工作,所以你需要为它们进行黑客攻击。
  4. 你最好将身高改为最小身高,否则会变得凌乱,然后你会在#mainContainer里面有很多内容。
  5. 在此处修正了它们:http://jsfiddle.net/WLPGE/1/