Question

过去我遇到过这个问题而且我已经解决了这个问题，但这一次我无法理解！该网站有一个连续的页眉和页脚栏，宽度为100％。在所有浏览器和屏幕尺寸中，条形图在屏幕上继续显示。在iPad上，它们停在填充物导航的位置。任何帮助都会很棒！

CSS：

body {
    color: #fff;
    background: url(../images/bg.png) repeat;
}


header {
    width: 100%;
    height: 275px;
}

#topBar {
    width: 100%;
    height: 5px;
    background-color:#dd8920;
}

#headWrap {
    width: 936px;
    height:295px;
    margin: 0 auto;
    position: relative;
    padding:0px;
}

#logo {
    position:absolute;
    top:20px;
    float:left;
}

#nav {
    width:400px;
    height:35px;
    padding:30px 0px 0px 0px;
    float:right;
    text-align:right
}

#nav ul li {
    display: inline;
    padding-left:30px;  
}

#slogan {
    position:absolute;
    top:240px;
    float:right;
    right: 96px;
}

#bodyWrap {
    width:1024px;
    padding:60px 50px 200px 50px;
    margin:0 auto;

}

footer {
    width: 100%;
    height: 100%;
    background-color: #3d3d3d;
    -webkit-box-shadow: 2px -5px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 5px -5px rgba(0, 0, 0, 0.3);
    margin-top: 50px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
}

#footerContainer {
    width: 285px;
    height:167px;
    margin: 0 auto;
    background-image: url(../images/footerLogo.png);
    background-repeat: no-repeat;
    padding-bottom: 30px;
        background-color: #33d;

}

    <!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">

  <link rel="stylesheet" href="../css/styles.css">
  <link rel="stylesheet" href="../css/textstyles.css">
  <link rel="stylesheet" href="../css/textslidegallery.css">



  <meta name="viewport" content="width=1024">

  <link rel="Shortcut Icon" href="../images/favicon.ico">


<!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
    <meta name="description" content="The HTML5 Herald">
<!-- TemplateEndEditable -->

</head>



<body>

    <header> 
            <div id="topBar"></div>

    <div id="headWrap">
                <div id="logo"> <a href="http://www.creativeantelope.com"><img src="../images/logo.png" alt="Antelope Creative Designs Logo" width="139" height="268" border="0"></a>
       </div>

<!-- TemplateBeginEditable name="nav" -->
            <div id="nav">
                <ul>
                    <li class="current"><a href="http://www.creativeantelope.com">Our Work</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul>               
      </div>
<!-- TemplateEndEditable -->

      <div id="slogan"><h1>Branding Your Business From Print To Web</h1></div>

      </div><!--headwrap-->
</header>

    <div id="bodyWrap">
        <!-- TemplateBeginEditable name="body" -->body<!-- TemplateEndEditable -->

        </div>



<footer>
        <div id="footerContainer"></div>
          <a href="http://www.stevewiant.com">designed by the groom with  <img src="../images/heart.png" alt="love" width="10" height="10" border="0"> </a>
          <br>
         <a href="mailto:wiantfamily@gmail.com"> <img src="../images/email.png" alt="email" width="15" height="20" border="0"> do you have questions?</a>
</footer>

Answer 1

填充left和right也应该是百分比%，这对于使您的布局更具固定性非常重要

iPad在右侧留下填充空间

1 个答案: