0

これは私のテストレスポンシブ Web ページであり、レスポンシブ Web サイトを作成するのは初めてです。

http://www.oldcompany.com.sg/test

すべて問題ありませんが、モバイルで見ると、スライダーとフッターの間に大きなギャップまたは空白があります..フッターの下にも..

HTML:

<!DOCTYPE html>


<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Old Company - Integrated Solution</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Page styles-->
  <link href="css/styles.css" rel="stylesheet">

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <link rel="stylesheet" href="css/fotorama.css">
  <script src="js/fotorama.js"></script>

</head>
<body>

<div class="header">
    <div class="fotorama-header">
        <!-- header -->
        <div style="letter-spacing: 1px; font-weight: bold; font-size: 16px;">
            <a href="http://www.oldcompany.com.sg" style="text-decoration: none; color: #fff;">
            <img src="img/oc_logo.png" />
            </a>
        </div>
        <!-- /header -->
    </div>
    <div class="menu">
        <a href="javascript: void(0);">Home</a>
        <a href="javascript: void(0);">About Us</a>
        <a href="javascript: void(0);">Services</a>
        <a href="contactus.html">Contact Us</a>
    </div>
</div>
<div class="page-wrap">
    <div class="fotorama" data-width="100%" data-height="100%" data-nav="none" data-autoplay="true"
        data-minHeight="auto" data-fitToWindowHeight="true" data-fitToWindowHeightMargin="0" data-margin="0"
        data-shadows="false" data-cropToFit="true">
        <div class="caption" data-img="img/open.png">
        </div>
        <div class="caption" data-img="img/lead.png">
        </div>
        <div class="caption" data-img="img/dynamic.png">
        </div>

    </div>
    <div class="push"></div>
</div>
<div class="site-footer">
    <div>
Copyright &copy; 2013, theoldcompany Pte Ltd. All right reserved
    </div>
</div>




</body>
</html>

CSS:

/* Global reset */
* {
    padding:0;
    margin:0;
}
html , body{ height: 100%; }

img, object {max-width: 100%;}

/* Clear fix: nicolasgallagher.com/micro-clearfix-hack/ */
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both; }
.group { *zoom:1; }  /* IE6-7 */

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin: 0 auto -2.5em;
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer
{
    background: rgba(0,0,0, .7);
}
.site-footer::after {height: 0px;}

.site-footer > div
{
    width: 90%;
    margin: 0px auto;
    text-align: center;
    font-size: 0.8em;
    color: #FFF;
    padding-top: 10px;
}
.site-footer, .push {
  /* .push must be the same height as footer */
  height: 2.5em; 
}


body {
    font-family:century gothic, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background:#fff;
    color:#111;
    font-size:16px;
    }

/* Header */
.header {
    position:relative;
    top:0;
    left:0;
    width:100%;
    color:#ccc;
    background:#111;
    background:hsla(0,0%,0%,.6);
    z-index:10;
    }

.header a,
.header a:link,
.header a:visited {
    color:#ccc;
    }
.header a:hover,
.header a:active,
.header a:focus {
    color:#fff;
    }

.fotorama-header {
    margin-left:8px;
    }

.menu {
    position:absolute;
    top:25px;
    right:8px;
    font-size:13px;
    }
    .menu a {
        margin-left:1em;
        }
4

3 に答える 3

1

.page-wrap{ min-height:100%} CSSから削除するだけ

于 2013-06-17T07:52:42.940 に答える