페이지 하단에 꼬릿말이 붙지 않고 있습니다.

-1

한 페이지의 아래쪽에만 머물도록 사이트 바닥 글에 다음을 시도했습니다. (다른 모든 페이지에서, 그것은 계획대로 작동 하나, 이유는 무엇입니까?)페이지 하단에 꼬릿말이 붙지 않고 있습니다.

이것은 사용하고 있지만 작동하지만 모든 모바일/태블릿 장치에서 작동하지 않습니다.

도움?

2016-07-20 trying to create my website

@media 스크린과 (최소 폭 : 567px) 및 (최대 폭 : 661px) { \t .page-ID-94. 사이트 하단 { \t \t clear : 둘 다; \t \t 너비 : 100 %; \t \t 높이 : 10 %; \t \t 위치 : 상대적; \t \t 하단 : -750px; \t \t 패딩 - 상부 : 1 %; \t}} –

@media 스크린과 (최소 폭 : 220px) 및 (최대 폭 : ~ 420) { \t .page-ID-94 .site 푸터 { \t \t 클리어 : 모두; \t \t 너비 : 100 %; \t \t 높이 : 10 %; \t \t 위치 : 상대적; \t \t 하단 : -1050px; \t \t 패딩 - 상부 : 1 %; \t}} –

@media 스크린과 (최소 폭 : 221px) 및 (최대 폭 : 241px) { \t .page-ID-94 .site 푸터 { \t \t 클리어 : 모두; \t \t 너비 : 100 %; \t \t 높이 : 10 %; \t \t 위치 : 상대적; \t \t 하단 : -1500 픽셀; \t \t 패딩 - 상부 : 1 %; \t} } –

나는 당신의 쿼리를 탐험되지 않은,하지만 요즘 당신은 다음과 같은 마크 업 스티커 바닥 글을 달성 할 수있다 :

<div class="page-wrapper"> 
    <header>Hi! I'm Header!</header> 
    <main>And I'm Main content section! Let's rock!</main> 
    <footer>Hi! I'm Footer!</footer> 
</div> 

.page-wrapper { 
    display: flex; 
    flex-direction: column; 
    min-height: 100%; 
    min-height: 100vh; 
    width: 100%; 
} 

header, 
footer { 
    height: 50px; 
} 

main { 
    flex: 1; 
}

내가 과거에이 방법을 사용했다 here

출처

2016-07-20 17:56:02 markoffden

을 통해 바이올린을 참조하고 완벽하게 작동 .

HTML :

<!DOCTYPE html> 
<head> 
    <title></title> 
</head> 
<body> 
    <nav></nav> 
    <article>Lorem ipsum...</article> 
    <footer></footer> 
</body> 
</html>

CSS :

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 
footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
}

출처

2016-07-20 18:36:09 Kim

은 그 코드를 복사하면 내 페이지의 일부가 흰색 컨테이너로 덮여 있기 때문에 저에게 적합하지 않습니다. 나는 .pg-id-94 .site-footer html로 썼다. { 위치 : relative; 최소 높이 : 100 %; } 본문 { 여백 : 0 0 100px;/* bottom = 바닥 글 높이 */ } 바닥 글 { 위치 : 절대; 왼쪽 : 0; 하단 : 0; 높이 : 100px; 너비 : 100 %; } –

어쩌면 코드를 다른 방식으로 다시 작성해야하지만 어떻게해야할지 모르겠다. –

페이지 하단에 꼬릿말이 붙지 않고 있습니다.

답변

관련 문제