HTML, CSS - 화면에 내용에 스티커 바닥 글 표시 의도 한대로

뷰포트의 끝에서 [제거] 내 사이트HTML, CSS - 화면에 내용에 스티커 바닥 글 표시 의도 한대로

내 바닥 글 표시를 참조하십시오 크기를 조정합니다.

화면 크기를 수직으로 조정하면 바닥 글이 그 위의 모든 항목과 겹칩니다.

어떻게 피할 수 있습니까?

2012-04-25 Sean Zulu

체크 아웃 this sticky footer tutorial을 확인하십시오. 다음 코드는 필요한 것입니다.

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 142px; /* .push must be the same height as .footer */ 
} 

/* 

Sticky Footer by Ryan Fait 
http://ryanfait.com/ 

*/

편집 : 래퍼에서

귀하의 음의 값은 바닥 글의 높이를 일치하지 않습니다. 그것은 귀하의 문제에서 가장 가능성이 큰 부분입니다.

#wrapper { 
    min-height: 100%; 
    min-width: 450px; 
    height: auto !important; 
    height: 100%; 
    /* your old code: margin: 0 auto -4em;*/ 
    margin: 0 auto -83px; 
} 

footer {  
    background: url('images/foot_bg.jpg') center no-repeat, 
    url('images/foot_liq_bg.jpg') repeat; 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:83px; 
    min-width: 450px; 
}

편집 :

당신은 HTML과 몸에 100 %로 설정 높이를 필요가 없습니다. 따라서 본문은 브라우저의 100 %가 아닌 부모 (html)의 100 %로만 설정됩니다. HTML의 높이를 100 %로 설정해야 작동 할 수 있습니다.

출처

2012-04-25 16:07:22

안녕하세요,이 자습서를 따라 왔지만 작동하지 않습니까? http://www.vault-x.com/index_1.html –

본문에만 높이 : 100 %를 추가했습니다. 그것은 html에 추가되기로되어 있습니다. 이것이 원인이 아닌 경우 빈 CSS 파일로 시작하여 끈적 인 바닥 글이 작동하는 데 필요한 것을 추가하는 것이 좋습니다. 그런 다음 거기에서 일하면서 추가 CSS를 추가하여 계속 부러지지 않았는지 확인합니다. –

감사합니다. –

절대 위치 지정을하기 때문에 중복됩니다. 콘텐츠의 나머지 부분에 상대적인 위치를 지정해야합니다. 주 내용을 페이지의 100 % 높이로 만들고 바닥 글을 아래에 놓습니다. 그런 다음 바닥 글의 높이와 동일한 양의 픽셀 인 음수 여백을 적용합니다.

바닥 글 margin-top:-100px;

소스 height:100px; 사용하는 경우 : CSS Sticky Footer

출처

2012-04-25 16:12:28

은 숀을 걱정하지 마십시오. 당신은 일하기가 너무 멀지 않습니다.

body 요소에서 padding-bottom에서 margin-bottom으로 변경하고 footer 요소의 절대 위치 지정을 사용해야합니다. 또한 '푸시'div를 추가하면이 끈적한 바닥 글을 작동시키는 데 필요합니다.도움이

이 jsFiddle, 그것은 나를 위해 작동 : http://jsfiddle.net/4vunq/

HTML :

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Vault-X</title> 
<!--JS enabling IE <=8 to recognise HTML5 elements--> 
    <script type="text/javascript"> 
    document.createElement ('header') 
    document.createElement ('footer') 
    </script> 
    <script type="text/javascript" src="javascript.js"></script> 
    <link href="style_01.css" title="one" rel="stylesheet" type="text/css"> 
</head> 
<body> 
    <div id="switchoff"> 
     <div id="wrapper"> 
      <header></header> 
      <div id="switch"> 
       <a href="#" onClick="lightSwitch();"> 
        <img src="http://www.vault-x.com/images/switch.jpg"> 
       </a> 
      </div> 
      <div id="content"><p class="switch">Hello World</p></div> 
      <div class='push'></div> 
     </div> 
     <footer></footer> 
    </div> 
</body> 
</html>

관련 CSS : 당신이 padding-bottom 대신 margin-bottom 있었다 여기

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
footer, .push { 
    height: 83px; /* .push must be the same height as "footer" */ 
}

body { 
    background:url('http://www.vault-x.com/images/body_bg.jpg') repeat-x; 
    background-color: #000; 
    margin-bottom:83px; 
}

아래쪽 여백이 너무 여기에 중요하다

#wrapper { 
    min-height: 100%; 
    min-width: 450px; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -83px; /* bottom margin is negative value of footer's height */ 
}

그리고 바닥 글 코드 : 단지에 대해 그것을해야

footer { 
background: url('http://www.vault-x.com/images/foot_bg.jpg') center no-repeat, 
url('http://www.vault-x.com/images/foot_liq_bg.jpg') repeat;; 
     width:100%; 
     height:83px; 
     min-width: 450px; 
}

. 멋진 찾고 사이트; 그리고 행운을 빌어! :)

출처

2012-04-25 17:43:10 InterfaceGuy

나는 분명히 덧붙였다 : 둘 다 겹쳐서 내 문제를 해결했다.

#footer { 
     position:relative; 
     width:100%; 
     height: 200px; 
     background-color:#7B7168; 
     margin-top: -200px; 
     padding-bottom:50px; 
     clear:both; 
     }

출처

2015-10-07 14:44:29 FloatingPC

HTML, CSS - 화면에 내용에 스티커 바닥 글 표시 의도 한대로

답변

관련 문제