하단에 바닥 글을 유지하는 방법

바닥 글은 페이지의 맨 아래에 있지는 않지만 모든 것을 시도했습니다. position: fixed;을 시도했지만 항상 아래로 스크롤하면 같은 위치에 머물러 있습니다. CSS 다음하단에 바닥 글을 유지하는 방법

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; 
} 

.footer, .push { 
    height: 142px; 
    background: black; 
}

출처

2017-09-23 Zerry

이 .footer 시도 첨가 { 총수 : 고정; 왼쪽 : 0 픽셀; 하단 : 0 픽셀; 높이 : 30px; 너비 : 100 %; 배경 : 검은 색; } – Rakib

끈적한 바닥 글이나 페이지 하단에있는 바닥 글에 대해 이야기하고 있습니까? –

페이지 하단에 있습니다. 나는 위치를 시도했다 : 고정; 하단 : 0; – Zerry

사용 :

.footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:142px; 
    width:100%; 
background:black; 
}

여기 테스트 바이올린입니다 : position: fixed를 사용하는 경우 https://jsfiddle.net/85nyb2mv/

출처

2017-09-23 10:24:52 Rakib

이 요소가 항상 화면의 같은 위치에있을 것입니다. 바닥 글이 래퍼 요소의 맨 아래에 있도록하려면 position: relative을 .wrapper 및 position: absolute에서 .footer으로 지정하면 바닥 글이 래퍼의 맨 아래에 배치됩니다.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
min-height: 100%; 
 
height: auto !important; 
 
height: 100%; 
 
margin: 0 auto -142px; 
 
background-color: gray; 
 
position: relative; 
 
} 
 

 
.footer, .push { 
 
height: 142px; 
 
width: 100%; 
 
background: black; 
 
position: absolute; 
 
bottom: 0; 
 
left: 0; 
 
}

<div class="wrapper"> 
 
    <div class="footer"></footer> 
 
</div>

출처

2017-09-23 10:25:56

사용이 CSS 스타일 : 예를 들면 다음과 같습니다

.wrapper { 
    height: calc(100% - 142px); 
    margin: 0 auto; 
} 

.footer { 
    height: 142px; 
    background: black; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    z-index: 1; 
}

출처

2017-09-23 10:29:41 IamMHussain

CASE 1

body 'height이보다 더 큰 100vh

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100vh; 
 
    height: 2000px; 
 
    position: relative; 
 
    background: pink; 
 
} 
 
header{ 
 
    width: 100vw; 
 
    height: 100px; 
 
    background: gold; 
 
} 
 
footer{ 
 
    position: absolute; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    width: 100vw; 
 
    height: 100px; 
 
    background:darkgray; 
 
}

<body> 
 
    <header> 
 
    </header> 
 
    <footer> 
 
    </footer> 
 
</body>

CASE 2

body 'height 인 미만 100vh

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100vh; 
 
    height: 200px; 
 
    position: relative; 
 
    background: pink; 
 
} 
 
header{ 
 
    width: 100vw; 
 
    height: 100px; 
 
    background: gold; 
 
} 
 
footer{ 
 
    position: absolute; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    width: 100vw; 
 
    height: 100px; 
 
    background:darkgray; 
 
}

<body> 
 
    <header> 
 
    </header> 
 
    <footer> 
 
    </footer> 
 
</body>

,691 363,210

출처

2017-09-23 10:30:01 zynkn

**html** 
<body> 
    <header> 
    </header> 
    <section> 
    </section> 
    <footer> 
    </footer> 
</body> 

**CSS** 
<style type="text/css"> 
footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    width:100%; 
    background:black; 
    color:#fff; 
    z-index:99; 
} 
</style>

출처

2017-09-23 11:34:56

문제가 <div class="fade">, 그래서 그것을 제거

.page-content:after { 
    content: ""; 
    display: block; 
}

<div class="page-content"> ----> 헤더와 푸터 사이

출처

2017-09-24 11:26:01 Zerry

하단에 바닥 글을 유지하는 방법

답변

관련 문제