반응 형 바닥 글은 모바일에 공백이 있습니다.

이것은 내 반응이 빠른 웹 페이지이며 반응 형 웹 사이트를 처음으로 작성한 것입니다.반응 형 바닥 글은 모바일에 공백이 있습니다.

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; 
     }

출처

2013-06-17 Raymond

나는 문제의 일부는 이미지가 그런 식으로 크기를 조정 할 수있는 권리 화면 비율 아니라고있을 것 같아요. 수평 적이지만 수직 이동 공간으로 크기를 조정하려고합니다. –

@StaceyGarrison, 슬라이더를 제거해야합니까? – Raymond

단지,456,516을 제거 (css)

출처

2013-06-17 07:52:42

'min-height : 100 %'을 제거했는데 바닥 글 아래에 공백이 있습니다. 모바일에서 멋지게 볼 수있는 방법이 있습니까? – Raymond

배경 이미지, 색상 또는 바닥 글 아래에 간격을 채우고 싶은 항목을 사용할 수 있습니다. –

고정 된 바닥 글 또는 머리글이 필요한 경우 높이를 설정하고 페이지 감싸기의 여백과 일치시켜야합니다.

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-17 18:57:24 Noogen

바닥 글이 일부 콘텐츠를 차단하고 아래로 스크롤해야하기 때문에 바닥 글 '위치 : 절대'를 원하지 않습니다. 바닥 글, 콘텐츠 아래 .. 가능합니까? – Raymond

당신이 요구하는 것은 테이블이 필요합니다. 이것과 비슷한 것 http://jsfiddle.net/XfjrP/? 참고하시기 바랍니다, 당신은 테이블 없이는 할 수 없습니다. div display : table을 사용할 수도 있지만 브라우저 간에는 까다로울 수 있습니다. 자바 스크립트로도 할 수 있지만, 테이블이 최상의 솔루션이 될 것입니다. – Noogen

내가 볼 .. 그래서 최고의 솔루션입니다 ..'테이블'을 사용해야합니다 .. 당신이 언급 한대로, 그것은 매우 까다로운 십자가 브라우저를 위해하기 때문에'테이블'을 사용하고 싶지 않아요 .. – Raymond

반응 형 바닥 글은 모바일에 공백이 있습니다.

답변

관련 문제