3

良い一日を。Web ページで作業していますが、最大幅と最小幅の定義に行き詰まりました。基本的に、ほとんどの Web ページのように Web ページをズームアウトするときに、自分のページを中央に配置したいと考えています。専門家の助けが必要です.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;
}
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 に適用するには、body だけでなく html にも高さを適用する必要があります。
  2. また、html と本文のパディングとマージンをクリアする必要があります。そうしないと、スクロールが追加されます。
  3. 高さ 100% のコンテナーにマージンを作成することはできません。または、ページにスクロールが追加されます。本文にパディングを付けて「box-sizing: border-box;」を付けてエミュレートしますが、古い IE では正しく動作しないため、ハックが必要になります。
  4. また、height を min-height に変更することをお勧めします。そうしないと、乱雑になり、#mainContainer 内に多くのコンテンツが含まれることになります。

ここで修正しました: http://jsfiddle.net/WLPGE/1/

于 2011-11-14T16:17:46.130 に答える