CSS画面が一番上に、大きな画面で一番中に表示されます

基本的には、画面の解像度が上がったときに画面の「内容」が中央に移動するのが基本です。これはポーズブルですか？そのためにCSS画面が一番上に、大きな画面で一番中に表示されます

// HTML

<html> 
<head> 
<title>BBQ day</title> 
<link href="CSS/stylesheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div class="container"> 
     <div class="content"></div> 
    </div> 
    <div class="powerd"></div> 
</body> 
</html>

// CSS

body{ background-color:#000;} 

.container{ position:relative; width:100%; height:auto;} 
.content{background-image:url('../images/BO_BBQdag-webt_03.jpg'); width:768px; height:607px; margin-left:auto; margin-right:auto; margin-top:0px 0.11111%} 
.powerd{ background-image:url('../images/BO_BBQdag-webt_07.jpg'); background-repeat:no-repeat; position:absolute; height:72px; width:287px; margin-left:auto; margin-right:auto;bottom:0px; left:50%; margin-left: -143.5px; }

出典

2012-03-07 starkiller

あなたの 'margin-top：0px 0.11111％'は無効です。あなたは 'margin-top'で1つの数字しか持てません。 – ScottS

は実際には画面の解像度が異なるか、ズームインされます。ズームインすると、一部のブラウザで余白が無効になっているため、パディングプッシュ要素が下に表示されます。 – CBRRacer

私は実際の解像度を教えています。しかし、私はすでに解決策を見つけました:) 速い応答に感謝します！ – starkiller

あなたは、画面の解像度ページロードイベントを取得する必要があります。

<script> 
     function GetScreenHeight_Width() 
      { 
         var h = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight; 
         var w = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth; 
         /** then you stored it into Hidden Control 
          As per resolution you can set position of the Content with absolute or Fixed position. 
        You have to set position of the <div class="content"></div> element as per resolution..  
    When page load then call this function to set Actual height width of the Screens 
         */     
       } 
// Call function on page load. 
GetScreenHeight_Width(); 
</script>

私が働いていない場合はお知らせください。

出典

2012-03-07 14:13:57

CSS画面が一番上に、大きな画面で一番中に表示されます

答えて

関連する問題