css3缩小页面时的最小 - 最大宽度

给你一个美好的一天。我正在网页上工作，但我被困在定义最大和最小宽度。基本上我希望我的页面能够像大多数网页一样缩小网页的中心位置。请需要专家的帮助.ASAP谢谢。css3缩小页面时的最小 - 最大宽度

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

来源

2011-11-14 Teffi

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

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

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

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

});

- 这要感谢Esailija link

来源

2011-11-18 15:00:17 Teffi

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

要将高度100％应用到#mainContainer，您不仅需要将高度应用于body，还需要将html应用于html。
此外，您还需要清除html和body上的填充和边距，否则它们将添加滚动条。
您无法将边距设置为100％高度的容器，否则会将卷轴添加到页面。我用身体上的填充和“盒子大小：边框”来模拟它们，但它在旧的IE中无法正常工作，所以你需要对它们进行破解。
此外，您最好将高度更改为最小高度，否则会变得凌乱，那么您将在#mainContainer内部拥有大量内容。

修正他们在这里：http://jsfiddle.net/WLPGE/1/

来源

2011-11-14 16:17:46

感谢您的澄清，并采取了一些时间寻找到这一点。那么它会改进我的页面布局。哦，这些网页集中在你身上？基本上它在缩小时确实处于中心位置，但与我的位置有点不同。当你缩小容器尺寸时，容器的尺寸会保持在原来的位置，但是我希望当我缩小尺寸时，宽度本身也将流畅地适应缩小而不仅仅是内容。它就像压缩宽度大小的内容一样。 – Teffi

如果我理解正确，当宽度超过940像素时，您希望#maincontainer拉伸，对吗？如果容器宽度的70％大于最小宽度（940px），它现在正在拉伸。所以如果你的屏幕宽度超过1350px，#mainWidth将开始变宽。如果你想在940px之后开始伸展，你需要改变“width：70％;”到“宽度：100％”;“或类似的东西 –

我想让#maincontainer限制其宽度，因此压缩它的所有内容，将它全部移动到中心位置 - 这里是它的快照最初看起来像。 - > [link] http://tinypic.com/r/28wjcci/5 - 然后当我缩小浏览器时它看起来像什么。[link] http://tinypic.com/r/ 102qlcn/5 - 这是我想要它看起来像什么时候缩小。[link] http://tinypic.com/r/2v2uuea/5。 – Teffi

css3缩小页面时的最小 - 最大宽度

回答

相关问题