Safari的屏幕尺寸優化

我的網站優化存在問題。在我的筆記本電腦上，一切似乎都適合寬度，高度，邊距等。但是，當我使用Imac或更大屏幕尺寸的另一臺計算機時，筆記本電腦屏幕尺寸的內容偏移量不是全屏。Safari的屏幕尺寸優化

這裏是我的CSS：

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, input, textarea, fieldset, blockquote 
{ 
    margin: 0; padding: 0; border: 0; 
} 

body 
{ 
    width:960px; 
    height:2587; 
    padding-left:30px; 
    background-color:white; 
} 

.headertwitter 
{ 
    margin-left:40px; 
    margin-top:-58px; 
} 

.headervimeo 
{ 
    margin-left:80px; 
    margin-top:-59px; 
} 

.headertypecontact 
{ 
    margin-top:-16px; 
    margin-left:290px; 
} 

#header 
{ 
} 

.headerwork 
{ 
    margin-left:147px; 
    margin-top:-51px; 
} 

.headercontact 
{ 
    margin-left:302px; 
    margin-top:-51px; 
} 

.logo 
{ 
    position:fixed; 
    z-index:20; 
    margin-top:30px; 
} 

.floater 
{ 
    position:fixed; 
    z-index:10; 
    color:#ffffff; 
    background-color:; 
    width:3000px; 
    height:270px; 
    margin-left:-100px; 
} 

#quote 
{ 
    text-align:center; 
    background-color:; 
    margin-right:-5px; 
    margin-top:-400px; 
    color:#ffffff; 
    font-family:Heiti TC; 
    font-size:20px; 
} 

#banner 
{ 
    position:fixed; 
    background-color:white; 
} 

.companyimage 
{ 
    margin-left:-80px; 
} 



#headericons 
{ 
    background-color:; 
    padding-left:430px; 
    margin-top:80px; 
    position:fixed; 
    z-index:10; 
    letter-spacing:100px; 
} 

#headertext 
{ 
    background-color:; 
    padding-left:430px; 
    position:fixed; 
    z-index:10; 
    word-spacing:93px; 
    margin-top:130px; 
    font-family:Heiti TC; 
} 

#banners 
{ 
    background-color:; 
    padding-left:1000px; 
    margin-top:161px; 
    position:fixed; 
    z-index:10; 
} 

#middleicons 
{ 
    padding-left:450px; 
    margin-right:-200px; 
} 

#portfolio 
{ 
    padding-left:175px; 
    margin-right:-200px; 
} 

ul 
{ 
    list-style:none; 
} 

.center 
{ 
    margin-right:-200px; 
    font-family:Heiti TC; 
    padding-right:210px; 
    text-align:center; 
    color:<--#ffffff-->; 
    padding-top:20px; 
} 

.contacttext 
{ 
    margin-right:-155px; 
    font-family:Heiti TC; 
    padding-right:210px; 
    text-align:center; 
    color:#ffffff; 
    font-size:15px; 
    line-height:22px; 
} 

h3.center 
{ 
    font-size:20px; 
    letter-spacing:1px; 
    line-height:30px; 
} 

#middledown 
{ 
    margin-top:550px; 
    position:relative; 
    background-color:white; 
    width:1235px; 
    margin-left:-80px; 
    padding-left:80px; 
    overflow:hidden; 

} 

#form 
{ 
    background-color:; 
    margin-right:185px; 
    padding-left:210px; 
    z-index:10; 
} 

#footericons 
{ 
    background-color:; 
    margin-right:-200px; 
    padding-left:495px; 
    letter-spacing:30px; 
    z-index:10; 
} 

#contactinfo 
{ 
    background-color:; 
    margin-top:-450px; 
    z-index:10; 
} 

#contactwhite 
{ 
    background-color:white; 
    padding-left:546px; 
    z-index:10; 
} 


#footer 
{ 
    margin-top:-40px; 
    background-color:black; 
    width:px; 
    margin-left:-40px; 
} 

a:link {text-decoration:none;} 
a:visited {text-decoration:none;} 
a:hover {text-decoration:none;} 
a:active {text-decoration:none;} 

a:link {color:#000000;}  
a:visited {color:#000000;} 
a:hover {color:#000000;} 
a:active {color:#000000;} 

label { 
    font-color:white; 
    color:white; 
    font-family: Heiti TC; 
} 


input { 
    width: 120px; height: 30px; padding: 3px 15px 0 10px; 
    float:; 
    background: #f9f9f9; border: 1px solid #dedede; 
    box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); 
    font: 20px Heiti TC; color: #7d7d7d; 
    z-index:10; 
} 


input#submit:link {color:#ffffff;}  
input#submit:visited {color:#ffffff;} 
input#submit:hover {color:#ffffff;} 
input#submit:active {color:#ffffff;} 

input#submit { 
    width: 150px; height: 35px; float:; clear:; cursor: pointer; 
    background: #585858 url(images/btn-bg.png); border: none; 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); 
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); 
    font-size: 20px; color: #f9f9f9; 
    text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4); 
    -moz-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4); 
    -webkit-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4); 
    margin-top:-45px; 
} 

#entirefooter 
{ 
    margin-top:50px; 
} 

    iframe 
    { 
     background-color:; 
     padding-left:345px; 
    }

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Phantom Productions</title> 
<link rel="stylesheet" type="text/css" href="phantomproductions.css"/> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script> 
<script type='text/javascript'> 
jQuery(document).ready(function($) { 

    $(".scroll").click(function(event){  
     event.preventDefault(); 
     $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); 
    }); 
}); 
</script> 
<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/lightbox.js"></script> 
<link href="css/lightbox.css" rel="stylesheet" /> 

</script> 
</head> 
<body> 

<div id="header"> 
    <img class="floater" src="header.png" alt="header"/> 
</div> 

<a href="#header" class="scroll"/> 
     <img class="logo" src="logo.jpg" alt="logo"/> 
</a> 

<div id="headericons"> 
    <ul> 
     <li>  
      <a href="#bug" class="scroll"/> 
       <img src="about_header.jpg" alt="about"/> 
      </a> 
     </li> 
     <li class="headerwork"> 
      <a href="#workstophere" class="scroll"/>  
       <img src="work_header.jpg" alt="work"/> 
      </a> 
     </li> 
     <li class="headercontact"> 
      <a href="#footer" class="scroll"/> 
       <img src="contact_header.jpg" alt="contact"/> 
      </a> 
     </li> 
    </ul> 
</div> 

<div id="headertext"> 
    <ul> 
     <li> 
      <a href="#bug" class="scroll"/> 
       ABOUT 
      </a> 
      <a href="#workstophere" class="scroll"/> 
       WORK 
      </a> 
     </li> 
     <li class="headertypecontact"> 
      <a href="#footer" class="scroll"/> 
       CONTACT 
      </a> 
     </li> 
    </ul> 
</div> 

<div id="banners"> 
    <ul> 
     <li>  
      <a href="http://facebook.com/"/>  
       <img src="headericons_03.png" alt="logo"/> 
      </a> 
     </li> 
     <li class="headertwitter"> 
      <a href="http://twitter.com/"/> 
       <img src="headericons_05.png" alt="logo"/> 
      </a> 
     </li> 
     <li class="headervimeo"> 
      <a href="http://vimeo.com/"/> 
       <img src="headericons_07.png" alt="logo"/> 
      </a> 
     </li> 
    </ul> 
</div> 

<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 


<div id="banner"> 
<img class="companyimage" src="imagewshadow_06.png" alt="company_image"/> 

    <div id="quote"> 
     <h1> 
       PHANTOM PRODUCTIONS 
     </h1> 
<br></br> 

     <p id="abouticon"> 
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
      sed do eiusmod tempor incididunt ut labore. 
     </p> 
    </div> 
</div> 

<br></br> 
<br></br> 
<br></br> 
<div id="bug"> 
<br></br> 
<br></br> 



<div id="middledown"> 

    <h1 class="center"> 
     WITH OUR FILM MENTALITY, WE 
    </h1> 

<br></br> 

    <p class="center"> 
     EMBRACE THE IMPOSSIBLE 
    </p> 

<br></br> 
<br></br> 
<br></br> 

    <ul id="middleicons"> 
     <li> 
      <img src="about_middle.jpg" alt=""/> 
     </li> 
    </ul> 


<br></br> 


<iframe src="http://player.vimeo.com/video/62398574" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen> 
</iframe> 

<div id="workstophere"> 
    <h3 class="center"> 
     "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt <br></br> ut labore. et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br></br> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <br></br> irure dolor in reprehenderit in voluptate velit esse <br></br> cillum dolore eu fugiat nulla pariatur." 
    </h3> 
</div> 

<br></br> 
<br></br> 
<br></br> 
<br></br> 


    <ul id="middleicons"> 
     <li> 
      <img src="work_middle.jpg" alt=""/> 
     </li> 
    </ul> 



    <div id="portfolio"> 

     <ul> 
      <li> 
       <a href="only.png" rel="lightbox[movies]" title="Only God Forgives"/> 
        <img src="state_03.png" onmouseover="src='state_18_03.png'"onmouseout="src='state_03.png'"onmousedown="src='state_18_03.png'"> 
       </a> 

       <a href="killing.png" rel="lightbox[movies]" title="Killing Them Sofly"/> 
        <img class="view view-first" img src="state_05.png" onmouseover="src='state_18_05.png'"onmouseout="src='state_05.png'"onmousedown="src='state_18_05.png'"> 
       </a> 
       <a href="2013-05-02 08.47.41.png" rel="lightbox[movies]" title="Iron man"/> 
        <img class="view view-first" img src="state_07.png" onmouseover="src='state_18_07.png'"onmouseout="src='state_07.png'"onmousedown="src='state_18_07.png'"> 
       </a> 
      </li> 
      <li> 
       <a href="2013-05-27 20.38.38.png" rel="lightbox[movies]" title="Empire Strikes Back"/> 
        <img class="view view-first" img src="state_12.png" onmouseover="src='state_18_12.png'"onmouseout="src='state_12.png'"onmousedown="src='state_18_12.png'"> 
       </a> 
       <a href="2013-02-04 00.03.56.jpg" rel="lightbox[movies]" title="Django Unchained"/> 
        <img class="view view-first" img src="state_13.png" onmouseover="src='state_18_13.png'"onmouseout="src='state_13.png'"onmousedown="src='state_18_13.png'"> 
       </a> 
       <a href="2013-05-15 08.47.59.png" rel="lightbox[movies]" title="The Hunger Games -Catching Fire"/> 
        <img class="view view-first" img src="state_14.png" onmouseover="src='state_18_14.png'"onmouseout="src='state_14.png'"onmousedown="src='state_18_14.png'"> 
       </a> 
      </li> 
     </ul> 
    </div> 

<br></br> 
<br></br> 


    <div id="entirefooter"> 

     <div id="contactwhite"> 
      <img src="footercontactcut_03.png" alt="footercontact"/> 
     </div> 

     <div id="footer"> 
      <img src="footerworks_02.png" alt="footer"/> 
     </div> 

     <div id="contactinfo"> 

      <p class="contacttext"> 
       Tel:2398 9850<br></br> 
       Fax:1960 3410<br></br> 
       e-mail: [email protected]<br></br> 
       135-235 1/F, Gloucester Road Wan Chai, Hong Kong 
      </p> 

<br></br> 

      <p class="contacttext"> 
       SUBSCRIBE TO OUR NEWSLETTER! 
      </p> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 

     <div id="form"> 
      <form action="#" method="post"> 
       <fieldset> 
        <label for="name">Name:</label> 
        <input type="text" name="name" id="name" /> 

        <label for="email">Last Name:</label> 
        <input type="text" name="name" id="lastname" /> 

        <label for="email">Email:</label> 
        <input type="email" name="email" id="email" /> 

        <input type="submit" value="Submit" id="submit" /> 
        </fieldset> 
      </form> 
     </div> 

<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
     <div id="footericons"> 
      <ul> 
       <li> 
        <a href="http://facebook.com/"/> 
         <img src="footerIconswshadow1.png" alt="facebook"/> 
        </a> 
        <a href="http://twitter.com/"/> 
         <img src="footerIconswshadow3.png" alt="twitter"/> 
        </a> 
        <a href="http://vimeo.com/"/> 
         <img src="footerIconswshadow2.png" alt="vimeo"/> 
        </a> 
       </li> 
      </ul> 
     </div> 
<br></br> 

     <p class="contacttext"> 
      Copyright © PHANTOM PRODUCTIONS - 2013 
     </p> 
    </div> 
    </div> 


</div> 
</div> 

</body> 
</html>

更新HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Phantom Productions</title> 
<link rel="stylesheet" type="text/css" href="phantomproductions.css"/> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script> 
<script type='text/javascript'> 
jQuery(document).ready(function($) { 

    $(".scroll").click(function(event){  
     event.preventDefault(); 
     $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); 
    }); 
}); 
</script> 
<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/lightbox.js"></script> 
<link href="css/lightbox.css" rel="stylesheet" /> 

</script> 
</head> 
<body> 

<div id="connectedbody"> 

<div id="header"> 
    <img class="floater" src="header.png" alt="header"/> 
</div> 

<a href="#header" class="scroll"/> 
     <img class="logo" src="logo.jpg" alt="logo"/> 
</a> 

<div id="headericons"> 
    <ul> 
     <li>  
      <a href="#bug" class="scroll"/> 
       <img src="about_header.jpg" alt="about"/> 
      </a> 
     </li> 
     <li class="headerwork"> 
      <a href="#workstophere" class="scroll"/>  
       <img src="work_header.jpg" alt="work"/> 
      </a> 
     </li> 
     <li class="headercontact"> 
      <a href="#footer" class="scroll"/> 
       <img src="contact_header.jpg" alt="contact"/> 
      </a> 
     </li> 
    </ul> 
</div> 

<div id="headertext"> 
    <ul> 
     <li> 
      <a href="#bug" class="scroll"/> 
       ABOUT 
      </a> 
      <a href="#workstophere" class="scroll"/> 
       WORK 
      </a> 
     </li> 
     <li class="headertypecontact"> 
      <a href="#footer" class="scroll"/> 
       CONTACT 
      </a> 
     </li> 
    </ul> 
</div> 

<div id="banners"> 
    <ul> 
     <li>  
      <a href="http://facebook.com/"/>  
       <img src="headericons_03.png" alt="logo"/> 
      </a> 
     </li> 
     <li class="headertwitter"> 
      <a href="http://twitter.com/"/> 
       <img src="headericons_05.png" alt="logo"/> 
      </a> 
     </li> 
     <li class="headervimeo"> 
      <a href="http://vimeo.com/"/> 
       <img src="headericons_07.png" alt="logo"/> 
      </a> 
     </li> 
    </ul> 
</div> 

<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 


<div id="banner"> 
<img class="companyimage" src="imagewshadow_06.png" alt="company_image"/> 

    <div id="quote"> 
     <h1> 
       PHANTOM PRODUCTIONS 
     </h1> 
<br></br> 

     <p id="abouticon"> 
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
      sed do eiusmod tempor incididunt ut labore. 
     </p> 
    </div> 
</div> 

<br></br> 
<br></br> 
<br></br> 
<div id="bug"> 
<br></br> 
<br></br> 



<div id="middledown"> 

    <h1 class="center"> 
     WITH OUR FILM MENTALITY, WE 
    </h1> 

<br></br> 

    <p class="center"> 
     EMBRACE THE IMPOSSIBLE 
    </p> 

<br></br> 
<br></br> 
<br></br> 

    <ul id="middleicons"> 
     <li> 
      <img src="about_middle.jpg" alt=""/> 
     </li> 
    </ul> 


<br></br> 


<iframe src="http://player.vimeo.com/video/62398574" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen> 
</iframe> 

<div id="workstophere"> 
    <h3 class="center"> 
     "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt <br></br> ut labore. et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br></br> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <br></br> irure dolor in reprehenderit in voluptate velit esse <br></br> cillum dolore eu fugiat nulla pariatur." 
    </h3> 
</div> 

<br></br> 
<br></br> 
<br></br> 
<br></br> 


    <ul id="middleicons"> 
     <li> 
      <img src="work_middle.jpg" alt=""/> 
     </li> 
    </ul> 



    <div id="portfolio"> 

     <ul> 
      <li> 
       <a href="only.png" rel="lightbox[movies]" title="Only God Forgives"/> 
        <img src="state_03.png" onmouseover="src='state_18_03.png'"onmouseout="src='state_03.png'"onmousedown="src='state_18_03.png'"> 
       </a> 

       <a href="killing.png" rel="lightbox[movies]" title="Killing Them Sofly"/> 
        <img class="view view-first" img src="state_05.png" onmouseover="src='state_18_05.png'"onmouseout="src='state_05.png'"onmousedown="src='state_18_05.png'"> 
       </a> 
       <a href="2013-05-02 08.47.41.png" rel="lightbox[movies]" title="Iron man"/> 
        <img class="view view-first" img src="state_07.png" onmouseover="src='state_18_07.png'"onmouseout="src='state_07.png'"onmousedown="src='state_18_07.png'"> 
       </a> 
      </li> 
      <li> 
       <a href="2013-05-27 20.38.38.png" rel="lightbox[movies]" title="Empire Strikes Back"/> 
        <img class="view view-first" img src="state_12.png" onmouseover="src='state_18_12.png'"onmouseout="src='state_12.png'"onmousedown="src='state_18_12.png'"> 
       </a> 
       <a href="2013-02-04 00.03.56.jpg" rel="lightbox[movies]" title="Django Unchained"/> 
        <img class="view view-first" img src="state_13.png" onmouseover="src='state_18_13.png'"onmouseout="src='state_13.png'"onmousedown="src='state_18_13.png'"> 
       </a> 
       <a href="2013-05-15 08.47.59.png" rel="lightbox[movies]" title="The Hunger Games -Catching Fire"/> 
        <img class="view view-first" img src="state_14.png" onmouseover="src='state_18_14.png'"onmouseout="src='state_14.png'"onmousedown="src='state_18_14.png'"> 
       </a> 
      </li> 
     </ul> 
    </div> 

<br></br> 
<br></br> 


    <div id="entirefooter"> 

     <div id="contactwhite"> 
      <img src="footercontactcut_03.png" alt="footercontact"/> 
     </div> 

     <div id="footer"> 
      <img src="footerworks_02.png" alt="footer"/> 
     </div> 

     <div id="contactinfo"> 

      <p class="contacttext"> 
       Tel:2398 9850<br></br> 
       Fax:1960 3410<br></br> 
       e-mail: [email protected]<br></br> 
       135-235 1/F, Gloucester Road Wan Chai, Hong Kong 
      </p> 

<br></br> 

      <p class="contacttext"> 
       SUBSCRIBE TO OUR NEWSLETTER! 
      </p> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 

     <div id="form"> 
      <form action="#" method="post"> 
       <fieldset> 
        <label for="name">Name:</label> 
        <input type="text" name="name" id="name" /> 

        <label for="email">Last Name:</label> 
        <input type="text" name="name" id="lastname" /> 

        <label for="email">Email:</label> 
        <input type="email" name="email" id="email" /> 

        <input type="submit" value="Submit" id="submit" /> 
        </fieldset> 
      </form> 
     </div> 

<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
     <div id="footericons"> 
      <ul> 
       <li> 
        <a href="http://facebook.com/"/> 
         <img src="footerIconswshadow1.png" alt="facebook"/> 
        </a> 
        <a href="http://twitter.com/"/> 
         <img src="footerIconswshadow3.png" alt="twitter"/> 
        </a> 
        <a href="http://vimeo.com/"/> 
         <img src="footerIconswshadow2.png" alt="vimeo"/> 
        </a> 
       </li> 
      </ul> 
     </div> 
<br></br> 

     <p class="contacttext"> 
      Copyright © PHANTOM PRODUCTIONS - 2013 
     </p> 
    </div> 
    </div> 


</div> 
</div> 


</div> 

</body> 
</html>

UPDATE CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, input, textarea, fieldset, blockquote 
{ 
    margin: 0; padding: 0; border: 0; 
} 

body 
{ 
    width:100%; 
    height:100%; 
    padding-left:30px; 
    background-color:white; 
} 

#connectedbody 
{ 
    width:900px; 
} 

.headertwitter 
{ 
    margin-left:40px; 
    margin-top:-58px; 
} 

.headervimeo 
{ 
    margin-left:80px; 
    margin-top:-59px; 
} 

.headertypecontact 
{ 
    margin-top:-16px; 
    margin-left:290px; 
} 

#header 
{ 
} 

.headerwork 
{ 
    margin-left:147px; 
    margin-top:-51px; 
} 

.headercontact 
{ 
    margin-left:302px; 
    margin-top:-51px; 
} 

.logo 
{ 
    position:fixed; 
    z-index:20; 
    margin-top:30px; 
} 

.floater 
{ 
    position:fixed; 
    z-index:10; 
    color:#ffffff; 
    background-color:; 
    width:3000px; 
    height:270px; 
    margin-left:-100px; 
} 

#quote 
{ 
    text-align:center; 
    background-color:; 
    margin-right:-5px; 
    margin-top:-400px; 
    color:#ffffff; 
    font-family:Heiti TC; 
    font-size:20px; 
} 

#banner 
{ 
    position:fixed; 
    background-color:white; 
} 

.companyimage 
{ 
    margin-left:-80px; 
} 



#headericons 
{ 
    background-color:; 
    padding-left:430px; 
    margin-top:80px; 
    position:fixed; 
    z-index:10; 
    letter-spacing:100px; 
} 

#headertext 
{ 
    background-color:; 
    padding-left:430px; 
    position:fixed; 
    z-index:10; 
    word-spacing:93px; 
    margin-top:130px; 
    font-family:Heiti TC; 
} 

#banners 
{ 
    background-color:; 
    padding-left:1000px; 
    margin-top:161px; 
    position:fixed; 
    z-index:10; 
} 

#middleicons 
{ 
    padding-left:450px; 
    margin-right:-200px; 
} 

#portfolio 
{ 
    padding-left:175px; 
    margin-right:-200px; 
} 

ul 
{ 
    list-style:none; 
} 

.center 
{ 
    margin-right:-200px; 
    font-family:Heiti TC; 
    padding-right:210px; 
    text-align:center; 
    color:<--#ffffff-->; 
    padding-top:20px; 
} 

.contacttext 
{ 
    margin-right:-155px; 
    font-family:Heiti TC; 
    padding-right:210px; 
    text-align:center; 
    color:#ffffff; 
    font-size:15px; 
    line-height:22px; 
} 

h3.center 
{ 
    font-size:20px; 
    letter-spacing:1px; 
    line-height:30px; 
} 

#middledown 
{ 
    margin-top:550px; 
    position:relative; 
    background-color:white; 
    width:1235px; 
    margin-left:-80px; 
    padding-left:80px; 
    overflow:hidden; 

} 

#form 
{ 
    background-color:; 
    margin-right:185px; 
    padding-left:210px; 
    z-index:10; 
} 

#footericons 
{ 
    background-color:; 
    margin-right:-200px; 
    padding-left:495px; 
    letter-spacing:30px; 
    z-index:10; 
} 

#contactinfo 
{ 
    background-color:; 
    margin-top:-450px; 
    z-index:10; 
} 

#contactwhite 
{ 
    background-color:white; 
    padding-left:546px; 
    z-index:10; 
} 


#footer 
{ 
    margin-top:-40px; 
    background-color:black; 
    width:px; 
    margin-left:-40px; 
} 

a:link {text-decoration:none;} 
a:visited {text-decoration:none;} 
a:hover {text-decoration:none;} 
a:active {text-decoration:none;} 

a:link {color:#000000;}  
a:visited {color:#000000;} 
a:hover {color:#000000;} 
a:active {color:#000000;} 

label { 
    font-color:white; 
    color:white; 
    font-family: Heiti TC; 
} 


input { 
    width: 120px; height: 30px; padding: 3px 15px 0 10px; 
    float:; 
    background: #f9f9f9; border: 1px solid #dedede; 
    box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); 
    font: 20px Heiti TC; color: #7d7d7d; 
    z-index:10; 
} 


input#submit:link {color:#ffffff;}  
input#submit:visited {color:#ffffff;} 
input#submit:hover {color:#ffffff;} 
input#submit:active {color:#ffffff;} 

input#submit { 
    width: 150px; height: 35px; float:; clear:; cursor: pointer; 
    background: #585858 url(images/btn-bg.png); border: none; 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); 
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); 
    font-size: 20px; color: #f9f9f9; 
    text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4); 
    -moz-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4); 
    -webkit-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4); 
    margin-top:-45px; 
} 

#entirefooter 
{ 
    margin-top:50px; 
} 

iframe 
{ 
    background-color:; 
    padding-left:345px; 
}

下面是當我打開它在一臺iMac時出現的問題：

Imac

，這是它的樣子我的筆記本電腦： macbook

此內容是一個div內，但是當我設置背景色爲DIV，並責令支付它沒有屏幕， how to i make it fit the full screen?

來源

2013-06-05 john3161

使它像這樣：

body 
{ 
    width:100%; 
    height:100%; 
    padding-left:30px; 
    background-color:white; 
}

無論如何，這總是使它100％。

而且正如我所看到的，您身體的身高尺寸後沒有「px」。永遠不要忘記把它放在這之後。

UPDATE

，我可以在這裏看到你更新你的HTML，我可以看到這一切都是鬆散對方。根據您的<body>標籤和您的</body>標籤上方製作一個div。以最大寬度爲中心，像900px或其他東西。由於身體的寬度爲100％，所有內容都會在900像素以內，並始終位於屏幕的中心。

希望這可以嗎？

UPDATE2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Phantom Productions</title> 
<link rel="stylesheet" type="text/css" href="phantomproductions.css"/> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script> 
<script type='text/javascript'> 
jQuery(document).ready(function($) { 

    $(".scroll").click(function(event){  
     event.preventDefault(); 
     $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); 
    }); 
}); 
</script> 
<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/lightbox.js"></script> 
<link href="css/lightbox.css" rel="stylesheet" /> 

</script> 
</head> 
<body> 

**PUT BEGIN DIV HERE** 

<div id="header"> 
    <img class="floater" src="header.png" alt="header"/> 
</div> 

<a href="#header" class="scroll"/> 
     <img class="logo" src="logo.jpg" alt="logo"/> 
</a> 

<div id="headericons"> 
    <ul> 
     <li>  
      <a href="#bug" class="scroll"/> 
       <img src="about_header.jpg" alt="about"/> 
      </a> 
     </li> 
     <li class="headerwork"> 
      <a href="#workstophere" class="scroll"/>  
       <img src="work_header.jpg" alt="work"/> 
      </a> 
     </li> 
     <li class="headercontact"> 
      <a href="#footer" class="scroll"/> 
       <img src="contact_header.jpg" alt="contact"/> 
      </a> 
     </li> 
    </ul> 
</div> 

<div id="headertext"> 
    <ul> 
     <li> 
      <a href="#bug" class="scroll"/> 
       ABOUT 
      </a> 
      <a href="#workstophere" class="scroll"/> 
       WORK 
      </a> 
     </li> 
     <li class="headertypecontact"> 
      <a href="#footer" class="scroll"/> 
       CONTACT 
      </a> 
     </li> 
    </ul> 
</div> 

<div id="banners"> 
    <ul> 
     <li>  
      <a href="http://facebook.com/"/>  
       <img src="headericons_03.png" alt="logo"/> 
      </a> 
     </li> 
     <li class="headertwitter"> 
      <a href="http://twitter.com/"/> 
       <img src="headericons_05.png" alt="logo"/> 
      </a> 
     </li> 
     <li class="headervimeo"> 
      <a href="http://vimeo.com/"/> 
       <img src="headericons_07.png" alt="logo"/> 
      </a> 
     </li> 
    </ul> 
</div> 

<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 


<div id="banner"> 
<img class="companyimage" src="imagewshadow_06.png" alt="company_image"/> 

    <div id="quote"> 
     <h1> 
       PHANTOM PRODUCTIONS 
     </h1> 
<br></br> 

     <p id="abouticon"> 
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
      sed do eiusmod tempor incididunt ut labore. 
     </p> 
    </div> 
</div> 

<br></br> 
<br></br> 
<br></br> 
<div id="bug"> 
<br></br> 
<br></br> 



<div id="middledown"> 

    <h1 class="center"> 
     WITH OUR FILM MENTALITY, WE 
    </h1> 

<br></br> 

    <p class="center"> 
     EMBRACE THE IMPOSSIBLE 
    </p> 

<br></br> 
<br></br> 
<br></br> 

    <ul id="middleicons"> 
     <li> 
      <img src="about_middle.jpg" alt=""/> 
     </li> 
    </ul> 


<br></br> 


<iframe src="http://player.vimeo.com/video/62398574" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen> 
</iframe> 

<div id="workstophere"> 
    <h3 class="center"> 
     "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt <br></br> ut labore. et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br></br> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <br></br> irure dolor in reprehenderit in voluptate velit esse <br></br> cillum dolore eu fugiat nulla pariatur." 
    </h3> 
</div> 

<br></br> 
<br></br> 
<br></br> 
<br></br> 


    <ul id="middleicons"> 
     <li> 
      <img src="work_middle.jpg" alt=""/> 
     </li> 
    </ul> 



    <div id="portfolio"> 

     <ul> 
      <li> 
       <a href="only.png" rel="lightbox[movies]" title="Only God Forgives"/> 
        <img src="state_03.png" onmouseover="src='state_18_03.png'"onmouseout="src='state_03.png'"onmousedown="src='state_18_03.png'"> 
       </a> 

       <a href="killing.png" rel="lightbox[movies]" title="Killing Them Sofly"/> 
        <img class="view view-first" img src="state_05.png" onmouseover="src='state_18_05.png'"onmouseout="src='state_05.png'"onmousedown="src='state_18_05.png'"> 
       </a> 
       <a href="2013-05-02 08.47.41.png" rel="lightbox[movies]" title="Iron man"/> 
        <img class="view view-first" img src="state_07.png" onmouseover="src='state_18_07.png'"onmouseout="src='state_07.png'"onmousedown="src='state_18_07.png'"> 
       </a> 
      </li> 
      <li> 
       <a href="2013-05-27 20.38.38.png" rel="lightbox[movies]" title="Empire Strikes Back"/> 
        <img class="view view-first" img src="state_12.png" onmouseover="src='state_18_12.png'"onmouseout="src='state_12.png'"onmousedown="src='state_18_12.png'"> 
       </a> 
       <a href="2013-02-04 00.03.56.jpg" rel="lightbox[movies]" title="Django Unchained"/> 
        <img class="view view-first" img src="state_13.png" onmouseover="src='state_18_13.png'"onmouseout="src='state_13.png'"onmousedown="src='state_18_13.png'"> 
       </a> 
       <a href="2013-05-15 08.47.59.png" rel="lightbox[movies]" title="The Hunger Games -Catching Fire"/> 
        <img class="view view-first" img src="state_14.png" onmouseover="src='state_18_14.png'"onmouseout="src='state_14.png'"onmousedown="src='state_18_14.png'"> 
       </a> 
      </li> 
     </ul> 
    </div> 

<br></br> 
<br></br> 


    <div id="entirefooter"> 

     <div id="contactwhite"> 
      <img src="footercontactcut_03.png" alt="footercontact"/> 
     </div> 

     <div id="footer"> 
      <img src="footerworks_02.png" alt="footer"/> 
     </div> 

     <div id="contactinfo"> 

      <p class="contacttext"> 
       Tel:2398 9850<br></br> 
       Fax:1960 3410<br></br> 
       e-mail: [email protected]<br></br> 
       135-235 1/F, Gloucester Road Wan Chai, Hong Kong 
      </p> 

<br></br> 

      <p class="contacttext"> 
       SUBSCRIBE TO OUR NEWSLETTER! 
      </p> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 

     <div id="form"> 
      <form action="#" method="post"> 
       <fieldset> 
        <label for="name">Name:</label> 
        <input type="text" name="name" id="name" /> 

        <label for="email">Last Name:</label> 
        <input type="text" name="name" id="lastname" /> 

        <label for="email">Email:</label> 
        <input type="email" name="email" id="email" /> 

        <input type="submit" value="Submit" id="submit" /> 
        </fieldset> 
      </form> 
     </div> 

<br></br> 
<br></br> 
<br></br> 
<br></br> 
<br></br> 
     <div id="footericons"> 
      <ul> 
       <li> 
        <a href="http://facebook.com/"/> 
         <img src="footerIconswshadow1.png" alt="facebook"/> 
        </a> 
        <a href="http://twitter.com/"/> 
         <img src="footerIconswshadow3.png" alt="twitter"/> 
        </a> 
        <a href="http://vimeo.com/"/> 
         <img src="footerIconswshadow2.png" alt="vimeo"/> 
        </a> 
       </li> 
      </ul> 
     </div> 
<br></br> 

     <p class="contacttext"> 
      Copyright © PHANTOM PRODUCTIONS - 2013 
     </p> 
    </div> 
    </div> 


</div> 
</div> 

**END DIV HERE** 

</body> 
</html>

來源

2013-06-05 07:11:38

感謝您的答覆！但是，它仍然無法在大屏幕上正常工作，也許我的HTML編碼方式有問題，仍然不確定是什麼導致了問題。 – john3161

它必須是你的HTML我猜。你能爲我做一個jsFiddle嗎？ –

檢查更新的awnser –

Safari的屏幕尺寸優化

回答

相關問題