0

这是我的测试响应式网页，也是第一次做响应式网站。

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 回答
1

如果要固定页脚或页眉，则必须设置它们的高度并匹配页面换行的边距。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;          /* needed for content height */
    text-align: left;
    vertical-align: top;
    overflow: hidden;
    position: relative;    /* help with position absolute */
}

.header {
    display: block;
    position: relative;
    height: 40px;
    width: 100%;
    background-color: black;
    color: white;
    overflow: hidden;
    text-align: center;
}

.page-wrap {     
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-top:    40px;     /* same height as header */
    margin-bottom: 40px;     /* same height as footer */
}

.content {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    text-align: left;
    -webkit-overflow-scrolling: touch;
    background-color: blue;
    color: white;
}

.site-footer {
    position: absolute;
    bottom: 0px;
    display: block;
    height: 40px;
    width: 100%;
    background-color: black;
    color: white;
    overflow: hidden;
    text-align: center;
}

http://jsfiddle.net/s2yZW/

于 2013-06-17T18:57:24.747 回答
-1

用这个：

.site-footer{over-flow-y:hidden;}
于 2021-01-20T11:06:32.453 回答